Twitter Bootstrap 3 Typeahead / Tagsinput Completi

Question

Edit: Added working JSFiddle

I'm using Twitter Bootstrap TagsInput with Bootstrap Typeahead. My source is a json file, but that is irrelevant, and I've checked with a static source.

The typeahead and tagsinput are working, however when I press enter, tab, or click on a tag, it creates a duplicate complete.

That extre 'default' happens whenever I press enter, or complete the typeahead. If I break the typeahead by separating with comma, or taking focus away from the window, it does not occur.

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'm sure it's something wonky that won't be reproducable, with my luck, so I'm hoping someone will have some institutional knowledge that they know would cause something like this to happen.

Here is an image of the extra text, in dev. tools:

I really appreciate any advice or suggestions. Thank you.

WORKING CODE

Thanks to @Girish, the following was what "fixed" this issue. I believe it to be a bug at this point in time, introduced somewhere in a more recent version of jQuery or the Typeahead. This code just manually removes the extra element, although hopefully something will come along to prevent it from being placed there in the first place, eliminating the extra code. For now it 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

A less verbose solution using afterSelect option:

$(".tags").tagsinput({
     typeahead: {
        afterSelect: function(val) { this.$element.val(""); },
        source: keywords
     }
});

Answer 2

I'm not sure this is looking bug, nothing custom code inside function, but selected tag is repeated in input field, but you can use alternative solution, itemAdded event to remove selected value from input field, see below sample code.

$('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 have also noticed the input field is generating every tag section so this or event couldn't be targeted tag input field, due to dynamic generation input field you will also need to delay to select input element from <selector>

DEMO

UPDATE : $.get() function is return xhr object not server response, so you need add callback method to get AJAX response, see below sample code.

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