使用带有Bootstrap 3的tagsinput和typeahead

Question

I'm trying to get tagsinput and typeahead working on my Drupal 7 site that has the Bootstrap 3 theme. I've downloaded bootstrap-tagsinput.css and bootstrap-tagsinput.js from here. I've also downloaded bootstrap3-typeahead.js from here. Now the code I'm trying to use to get everything working is below:

<link rel="stylesheet" href="/sites/all/libraries/bootstrap-tagsinput/bootstrap-tagsinput.css">
<script src="/sites/all/libraries/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<script src="/sites/all/libraries/bootstrap-typeahead/bootstrap-typeahead.js"></script>

<script type="jquery">
$("input").tagsinput({
  typeahead: {
    source: ["Amsterdam", "Washington", "Sydney", "Beijing", "Cairo"]
  }
});
</script>

<input type="text" data-role="tagsinput" placeholder="Add tags" class="typeahead" data-provide="typeahead" autocomplete="off" />

Note: I'm unfamiliar with jquery. No errors are returned when debugging. The tagsinput function works fine, but typeahead doesn't seem to work. The version of typeahead I chose should be compatible with Bootstrap 3. I'm currently avoiding using Twitter typeahead, which requires using Bootstrap LESS subtheme to avoid CSS conflicts.

Answer 1

There are 2 issues:

1. 'jquery' is not a valid media type for the script tag.
2. Your script is running before the input is created.

Try this code instead:

<link rel="stylesheet" href="/sites/all/libraries/bootstrap-tagsinput/bootstrap-tagsinput.css">
<script src="/sites/all/libraries/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<script src="/sites/all/libraries/bootstrap-typeahead/bootstrap-typeahead.js"></script>

<input type="text" data-role="tagsinput" placeholder="Add tags" class="typeahead" data-provide="typeahead" autocomplete="off" />

<script>
    $("input").tagsinput({
        typeahead: {
            source: ["Amsterdam", "Washington", "Sydney", "Beijing", "Cairo"]
        }
    });
</script>

I don't specify the media type (the type attribute) on the script tag, and browsers understand you mean a JavaScript script. You can read a debate about it on this StackOverflow question.

Then, run your script AFTER the input is created.

And of course I am assuming you are loading the jQuery library before your script (and before you call your tagsinput and typeahead libraries).