CODEWITHSUNDEEP
javascriptmeteortwitter-bootstrap-3typeahead
Shiraj
Shiraj

Reputation: 145

Typeahead plugin and Bootstrap Tags input plugin Meteor not working

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.

Upvotes: 13

Views: 7923

Answers (5)

Iwan B.
Iwan B.

Reputation: 4166

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: ...

Upvotes: 15

Dan Ochiana
Dan Ochiana

Reputation: 3408

Took me a few hours but here's what worked for me: besides using bootstrap3-typeahead (and not typehead.js) I also had do use an older version of it v3.1.1.

Upvotes: 0

hXJaXNJxPrYRBxXiCzWc
hXJaXNJxPrYRBxXiCzWc

Reputation: 439

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.

Upvotes: 3

Nadeeshaan
Nadeeshaan

Reputation: 376

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>

Upvotes: 4

Daniel Hartmann
Daniel Hartmann

Reputation: 115

I think the source attribute should be a function.

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

Upvotes: 0

Related Questions