twitter typeahead.js + bootstrap tagsinput = Object [object Object] has no method 'setQuery'

Question

I'm using Twitter typeahead with Bootstrap Tags Input. The code looks like this:

$(selector).tagsinput('input').typeahead({
    name:'tags',
    remote: "/admin/tags/search/%QUERY?format=json"
}).bind('typeahead:selected', function (object, datum) {
    $(selector).tagsinput('add', datum);
    $(selector).tagsinput('input').typeahead('setQuery', 'test');
});

This is pretty much copied from the example here: http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap3/ (to see the original example you need to click 'Show code' in the Typeahead section.

It works apart from the line $(selector).tagsinput('input').typeahead('setQuery', ''); which gives me this error:

Uncaught TypeError: Object [object Object] has no method 'setQuery' 

That line is supposed to reset the text that has already been entered to typeahead control after the suggestion has been added to the list of tags. If I add the same line outside of the even callback like this:

$(selector).tagsinput('input').typeahead('setQuery', 'test');

It works.

The only thing I noticed buy debugging is that $(selector).tagsinput('input').typeahead points to a different function outside and inside the event handler function.

Any ideas?

Answer 1

我写这个

$("#TagsInput").tagsinput("input").typeahead("val", "");

Answer 2

I had same problem. There you can see the correct use.

You must set typeahead in second line:

$(selector).tagsinput();
$(selector).tagsinput('input').typeahead('setQuery', '');