Bootstrap 3 tagged with Bootstrap Login and typeahead don't show tags inside the login

Question

I am trying to use Bootstrap 3 with Bootstrap Input and typeahead tags, but it does not show the tags inside the input.

Hard to explain ... Better to see in jsfiddle: https://jsfiddle.net/claudiosw/5cww4fcg/3/

I tried using 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 this, do two things:

• To show tags inside an input, do not use either data-role="tagsinput" or tagsinput() . Instead, only run it in js.

• To clear plaintext after adding a tag, you must add:

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

  to tagsinput() parameters.

See updated JSFiddle