Bootstrap 3 Typeahead无法与Bootstrap标签一起使用

Question

I'm following the tutorial from following link, bootstrap3-tutorial . Now in that link there is an example as below,

HTML code,

<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />

jQuery code,

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  }
});

When I type 'S', it is expected that I get the suggestion 'Sydney', but the problem is I'm not getting any suggestions. Below are the files that I'm importing,

<link href="bootstrap3.min.css" rel="stylesheet">
        <link href="typeaheadjs.css" rel="stylesheet">    
    <script src="jquery.js"></script>
    <script src="bootstrap3.min.js"></script>
    <script src="typeahead.js"></script>

So why I'm not getting any suggestions? You can also suggest me some other way through which I can generate suggestions for creating bootstrap tags.

Answer 1

You should remove data-role="tagsinput" , since you are calling the plugin directly.

Also, add an Id to the input .

So your should become:

<input type="text" id="id1" value="Amsterdam,Washington,Sydney,Beijing,Cairo" />

And use should change your jquery to:

$(function () {
    $('#id1').tagsinput({
        typeahead: {
            source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
        }
    });
});

This should work.