Sample of Bootstrap Tags Input:
When Cairo 'Tag' is entered, the Tag is added into the tagging list:
HTML:
<input class="span12 tagsinput" id="addinputtag" type="text" value="" data-role="tagsinput" />
JS:
$("#addinputtag").on('itemAdded', function(event) {
var workspaceNameuppcase = event.item.toUpperCase();
var temp = $("#addinputtag").tagsinput('items');
var duplicatecount = 0;
temp.forEach(function(tag) {
if (workspaceNameuppcase === tag.toUpperCase())
{
duplicatecount += 1;
}
});
//remove duplication
if (duplicatecount > 1)
{
$("#addinputtag").tagsinput('remove', event.item);
}
.
.
.
}
Explanation:
"itemAdded" Event is invoked when an item is added into Bootstrap Tags Input. By going through this event, the new added item is retrieved and compared against the tagging list in it. if they are found same word, the new added item required to be removed. This filtering step is applied in the post event when item is added into the list. It would be great if there is pre-event applicable when input text is changed before the item is added.