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?
Tagsinput. js is a jQuery extension to make the Bootstrap Tags Input jQuery plugin work with the latest version of Bootstrap 4 framework. The Bootstrap Tags Input plugin allows you to add, remove, manager, manipulate tags and tokens with Twitter Bootstrap user interface.
Typeahead. A basic, easily extended plugin for quickly creating elegant typeaheads with any form text input.
Use a <select multiple /> as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing <option /> elements will automatically be set as tags. This makes it also possible to create tags containing a comma.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With