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.
There are 2 issues:
script
tag.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).