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'));
});
