bootstrap-tagsinput with typeahead, bootstrap-3

Question

In a project of mine I used to have bootstrap-tagsinput http://timschlechter.github.io/bootstrap-tagsinput along bootstrap-2.3.2. Recently I've updated both (bootstrap to 3, and tagsinput to 0.3.9). During the update I found out that tagsinput externally depends on http://twitter.github.io/typeahead.js/.

I tried to use bs-tagsinput with typeahead according to the docs. That was a bit bumpy. For example the typeahead code sample under bootstrap-tagsinput docs:

$('input').tagsinput('input').typeahead({
  prefetch: 'citynames.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {  
  this.tagsinput('add', datum.value);
  this.tagsinput('input').typeahead('setQuery', '');
}, $('input')));
</script>

typeahead['setQuery'] no longer exists in typeahead ver 1.0 (it does in ver 0.9). I use the typeahead.source method for the dataset. typeahead from 'source' is not implemented in 0.9 so downgrading does not seem like an option. I wasn't sure if to replace it with typeahead['val'] or not (though, both didn't fix the issues I was seeing). As for CSS, I copied it from the bootstrap-tagsinput docs page -- not sure this was the intention (I'm a newb so I don't know better).

The problem is that after putting everything together, I bumped into buggy behavior (as expected). Specifically I'm facing a problem where after inserting a tag (typing a word and pressing enter): (1) the tt-dropdown-menu should disappear but it does not. It sticks around along with the previous tt-suggestions list and (2) the tt-hint field should be cleared but is not

It could be useful to mention that this problem does not occur if I use the arrows to select one of the tt-suggestions

Anyone knows whats the best way to get back the tagsinput-w/typeahead functionality?

Answer 1

After some more digging I've found the answer here: Where is the typeahead JavaScript module in Bootstrap 3 RC 1?

To make a long story short, looks like bootstrap-tagsinput and typeahead.js 1.0 just don't play well because of css/other incompatibilities.

This project https://github.com/bassjobsen/Bootstrap-3-Typeahead (thanku @bassjobsen) solved it for me. It backports bootstrap-typeahead from 2.3.2 into bootstrap-3 (the API is unchanged) and so far it works well with bootstrap-tagsinput!

Answer 2

The twitter.github.io/typeahead.js not compatible with bootstrap 3.

You can use this Typeahead which is compatible with twitter bootstrap 3

https://github.com/bassjobsen/Bootstrap-3-Typeahead

Actually the developer migrated bootstrap 2 code in to bootstrap 3 here is the details http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/