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!

Can you explain exactly what you expect to see/happen when typing in your input (and what you want to type)? — ganders, Apr 11 '17 at 18:29
@ganders, it is like what Jaqen did. So, it seems that the question is already answered. Either way thanks to try. — Claudio Shigueo Watanabe, Apr 11 '17 at 23:48

score 4 · Accepted Answer · answered Apr 11 '17 at 21:25

To fix it do two things:

To show the tags inside the input dont use both data-role="tagsinput" and tagsinput(). Instead, init it only with in the js.
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

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

1 Answers1