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

i'm trying use bootstrap 3 bootstrap tags input , typeahead doesn't show tags inside input.

it difficult explain... better see in jsfiddle: https://jsfiddle.net/claudiosw/5cww4fcg/3/

i have tried use typeahead.js result same.

here 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!

to fix 2 things:

1. to show tags inside input dont use both data-role="tagsinput" , tagsinput(). instead, init in js.

2. to clear plaintext after tag added should add:

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

   to tagsinput() options.

see updated jsfiddle