Twitter Bootstrap 3 Typeahead / Tagsinput Shutting Down Twice

Question

Edit: Added working JSFiddle

I am using Twitter Bootstrap TagsInput with Bootstrap Typeahead. My source is a json file, but that doesn't matter, and I checked it with a static source.

Typeahead and taginput operations work, however, when I press enter, tab or click on a tag, it creates a duplicate.

This extre 'default' happens whenever I press enter or end typeahead. If I break typeahead by separating the comma or diverting attention from the window, this will not happen.

Here is the input:

<input id="itemCategory" type="text" autocomplete="off" class="tagsInput form-control" name="itemCategory"> 

And here is the script:

  <script> $('.tagsInput').tagsinput({ confirmKeys: [13, 44], maxTags: 1, typeahead: { source: function(query) { return $.get('listcategories.php'); } } }); </script> 

I am sure that this is something shaky that will not be reproduced, with my luck, so I hope that someone will have some kind of institutional knowledge that, as they know, will cause something like that.

Here is an image of additional text in dev. tools:

I really appreciate any advice or suggestions. Thanks.

WORK CODE

Thanks to @Girish, the following problem has been “fixed”. I believe this is a bug at this point in time, introduced somewhere in the newer version of jQuery or Typeahead. This code simply removes the excess element manually, although I hope that something will come to prevent it from being placed there, first of all, excluding additional code. So far this works for me.

  $('.tagsInput').tagsinput({ confirmKeys: [13, 44], maxTags: 1, typeahead: { source: function(query) { return $.get('tags.php'); } } }); $('.tagsInput').on('itemAdded', function(event) { setTimeout(function(){ $(">input[type=text]",".bootstrap-tagsinput").val(""); }, 1); }); 

Answer 1

I am not sure if this looks like an error, nothing is embedded inside the function code, but the selected tag is repeated in the input field, but you can use an alternative solution, itemAdded event, to remove the selected value from the input field, see the code example below.

 $('input').tagsinput({ typeahead: { source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'] }, freeInput: true }); $('input').on('itemAdded', function(event) { setTimeout(function(){ $(">input[type=text]",".bootstrap-tagsinput").val(""); }, 1); }); 

I also noticed that the input field generates each section of the tag, so this or event cannot be the target tag input field due to dynamic input. You will also need a delay to select an input element from <selector>

Demo

The UPDATE function : $.get() returns an xhr object not a server-side response, so you need to add a callback method to get an AJAX response, see the sample code below.

 $('.tagsInput').tagsinput({ confirmKeys: [13, 44], maxTags: 1, typeahead: { source: function(query) { return $.get('listcategories.php').done(function(data){ /*if you have add `content-type: application/json` in server response then no need to parse JSON otherwise, you will need to parse response into JSON.*/ return $.parseJSON(data); }) } } });