Rails + Bootstrap Tags Input + typeahead


I’m trying to set up this feature on my little project in rails: http://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

But I’m not sure what I’m doing wrong. I dropped jquery, bootstrap-tagsinput and typeahead.bundle files into my app/assets/javascript, but I still can’t get it to work.

To my form I added:

<input type="text" data-role="tagsinput" />
<%= javascript_tag do %>
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
<% end %>

and a citynames.json to my app/assets folder, as well as added

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

to the top, but while tags input itself kinda works, I can’t get typeahead to work or add freeInput: false option and get that one to work.




  1. download latest bootstrap-tagsinput

  2. get bootstrap-tagsinput.css from /src and put to /assets/stylesheets/.

  3. Rename bootstrap-tagsinput.css to bootstrap-tagsinput.scss if you use scss

  4. In applications.scss @import 'bootstrap-tagsinput' or require

  5. get bootstrap-tagsinput.js from /src and put to /assets/javascript/

  6. in assets/javascript/application.js require your js =//require bootstrap-tagsinput

prefetch: {
    url: 'assets/citynames.json',
    filter: function(list) {
      return $.map(list, function(cityname) {
        return { name: cityname }; });

url: 'assets/citynames.json' – this will not work. you can provide citinames from controller or put this file in public and after that you can get this json from public folder root_url/folder/citinames.json.


Trying it right now. About public – I didn’t figure out yet completely how to point route to files in there using relative addressing. If file is just in public folder I have in project root, will it be “../public/citinames.json”?
– rails9231
1 hour ago
Alright, seems bootstrap plugin works now! Still didn’t get typeahead to work though.
– rails9231
1 hour ago
if you put a file to /public/file.* that will be accessible from url: http://your_url/file.*
Hmm, no way to use relative addressing? I want to be able to test it on my dev environment (which is basically on localhost) and on live (which has it’s own url). EDIT: can I alternatively pass the possible tags as array just inside my view .erb file?
– rails9231
1 hour ago
if you put citynames.json to public then you can get this json from http://localhost:3000/citynames.json