CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3bootstrap-tokenfield
Tasos
Tasos

Reputation: 7577

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

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.

Upvotes: 4

Views: 11626

Answers (6)

AsDh
AsDh

Reputation: 86

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.

Upvotes: 0

Ingwar
Ingwar

Reputation: 21

  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; }

Upvotes: 2

Colin P.
Colin P.

Reputation: 1

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

Upvotes: 0

Bugs Bunny
Bugs Bunny

Reputation: 2674

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.

Upvotes: 3

Man Of God
Man Of God

Reputation: 784

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

Upvotes: 1

Archarachne
Archarachne

Reputation: 345

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.

Upvotes: 3

Related Questions