Tokenfield (tag input) autocomplete in Bootstrap 3 doesn't work

Question

I am trying to implement a simple tags input in Bootstrap 3 with Tokenfield, but I've stacked somewhere.

HTML code:

<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/css/bootstrap-tokenfield.min.css" rel="stylesheet">

<div class="form-group">
   <label for="myinput">Κατηγορία</label>
   <input id="myinput" type="text" class="form-control">
</div>

Javascript:

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/bootstrap-tokenfield.min.js"></script>

<script type="text/javascript">
   $('#myinput').tokenfield({
  autocomplete: {
    source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
    delay: 100
  },
  showAutocompleteOnFocus: true
})
</script>

Error: It doesn't show the autocomplete. I don't have any error in the console. I can add tags manually.

Answer 1

It will work if you include both jquery-ui js and css.

• Go to this link jquery-ui

• Download 1.12.0-rc.2 version of jquery

• Include both jquery-ui.css and jquery-us.js in your html

It worked for me.

Answer 2

I know this answer came pretty late, but the autocomplete property for setting the lookup data is not source but lookup.

Tokenfield's example at http://sliptree.github.io/bootstrap-tokenfield/#options is not updated.

You can see that the right property is lookup from https://github.com/devbridge/jQuery-Autocomplete

Answer 3

1. include jQuery UI (with autocomplete)
2. if you use "Bootstrap modal" or "jQuery-UI dialog" take a little fix:

.ui-autocomplete { z-index: 5000; }

Answer 4

From what I see this it's the same problem I had a few days ago. What you need as well is jquery-ui with autocomplete.js.

http://jqueryui.com/download/ generate your own jquery-ui.min.js including autocomplete.js and it should work.

Answer 5

The Tokenfield works either with Jquery Ui autocomplete or with Typeahead Js. You must use one of them but from the code above you are not using any of them so of course nothing will happen. From the code above, you are trying to implement it with Jquery Ui autocomplete so you will need to link to the css and javascript of jquery Ui autocomplete

Read More about Bootstrap Tokenfield here

Answer 6

You do NOT necessarily need jQuery UI, nor Typeahead Js. If you are looking for

a simple tags input

without autocomplete feature, just initialize like this

 $('#myinput').tokenfield();

Hope it helped.