I’ve got a work project that fills in a database field with multiple comma separated values and thought using the bootstrap-tagsinput
script would fit very well. Only I managed to misinterpret the instructions and made a bit of a hole to dig myself out of.
The big mistake I made was to add a data-role="tagsinput"
attribute to my HTML. This was a bad mistake because I then tried to configure it using JavaScript – setting the tagClass and typeahead options. It worked, but nothing like I was expecting. I couldn’t reference it by it’s id selector using $('#selector')
in the script and ended up using $('.boostrap-tagsinput > input')
Which can’t be right.
Because I added the data-role
attribute it meant that the input was already initialised as a tagsinput. So in my script where I tried to use $('#selector').tagstinput({ config })
and ended up with using $('.boostrap-tagsinput > input').tagsinput({ config })
I was actually initialising a new tagsinput control within the data-role
version! My generated HTML had a div
of class="bootstrap-tagsinput"
inside another of the same class – very confusing.
So the proper way, for my usage, was to NOT use data-role
to set the field to a tagsinput, but to initialise it within JavaScript. Then I can use the $('#selector')
and properly return the selected values and manipulate the control.
var myTags = $('#myTags').tagsinput({ tagsClass: 'label label-success', itemValue: 'value'. itemText: 'text', typeahead: { minLength: 3, source: function(query) { return $.get('/api/myquery', {query: query}); }, afterSelect: function(val) { this.$element.val(''); // Clear the input box glitch } }); $('#myTags').on('itemAdded itemRemoved', function(el) { console.log(el); console.log($('#myTags').tagsinput('items')); });