Typeahead plugin and Bootstrap Tags input plugin Meteor not working

Question

We've installed 'bootstrap-tagsinput.js' and the 'typeahead' plugin for doing a tyepahead drop down for tags for an input field in one of our forms. The hardcoded tags work properly. However, the typeahead part doesnt work properly.

We have the following HTML:

<div class="form-group">
<label>Types</label><br />
<input class="form-control tags" type="text" name="type" value="Wordpress, Guitar Hero" data-role="tagsinput" />
</div>

and the following JS:

Template.form.rendered = function() {
       // Initialise tags input
    $('.tags').tagsinput({
    typeahead: {
        source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
    }
    });
};

As we type, we would like it to pickup the following data items and display in a type ahead dropdown. However, it only display the hardcoded types and when we type something similar to the source data, it does not show in a dropdown.

Answer 1

I am not sure if it is too late to answer this question.. But I had the same problem and I used typeahead for bootstrap 3 with the bellow code snippet. Hope this will help someone...

<input id="my-tags" type="text" placeholder="Add tags" data-provide="typeahead"/>

 <script type="text/javascript">
           var colors = ["red", "blue", "green", "yellow", "brown", "black"];
           var elt = $('#my-tags');
           elt.typeahead();
           $('#my-tags').tagsinput({
                typeahead: {
                     source: colors
                }
           });
  </script>

Answer 2

Same problem here. Resolved dropping the original typeahead.js (that is not compatible with Bootstrap 3) and using bootstrap3-typeahead.js (https://github.com/bassjobsen/Bootstrap-3-Typeahead).

Moreover, you don't need to add (actually on some occasions you MUST remove it in order to work)

data-role="tags input"

when you specify

$('#my_field').tagsinput({ typeahead: ...

Answer 3

I'd like to clarify some of the other answers since they're not saying it clearly enough.

Currently, the highest voted package for typeahead on Atmosphere is by sergeyt:typeahead. Apparently, there's some issues when using this package.

After fiddling with it for about an hour, I searched for an alternative. After installing mrt:bootstrap3-typeahead - everything worked as expected.

So my recommendation is to try that package if you're having problems.