Bootstrap 3 with Bootstrap Tags Input and typeahead don't show the tags inside input

Question

I'm trying to use Bootstrap 3 with Bootstrap Tags Input and typeahead but it doesn't show the tags inside the input.

It is difficult to explain... It is better to see in jsfiddle: https://jsfiddle.net/claudiosw/5cww4fcg/3/

I have tried to use typeahead.js but the result was the same.

Here is the code:

<input type="text" class="form-control" rows="3" value="Test1,Test2" data-role="tagsinput" />


<script>
  $(document).ready(function() { 

      $('input').tagsinput({
        typeahead: {
          source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
        }
      });
  });
</script>

Thanks in advance!

Answer 1

To fix it do two things:

1. To show the tags inside the input dont use both data-role="tagsinput" and tagsinput(). Instead, init it only with in the js.

2. To clear the plaintext after a tag is added you should add:

   afterSelect: function() {
       this.$element[0].value = "";
   }
   

   to the tagsinput() options.

See updated JSFiddle