在引导带3中使用标签输入和提前输入

Question

我正在尝试获得标签输入和提前输入我的Drupal 7网站，其中有启动3主题。我从这里下载了引导-tagsinput.css和引导-tagsinput.js。我还从这里下载了bootstrap3-typeahead.‘ve。现在，我尝试使用的代码如下所示：

<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" />

注意:我不熟悉jquery。调试时不返回错误。tagsinput函数工作正常，但typeahead似乎不起作用。我选择的typeahead版本应该与Bootstrap 3兼容，我目前正在避免使用Twitter类型提前，这需要使用Bootstrap子主题来避免CSS冲突。

Answer 1

有两个问题：

1. ‘'jquery’不是script标记的有效媒体类型。
2. 在创建input之前，您的脚本正在运行。

尝试下面的代码：

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

我没有在script标记上指定媒体类型(类型属性)，而且浏览器理解您指的是一个JavaScript脚本。你可以在这个StackOverflow问题上读到关于它的辩论。

然后，在创建输入之后运行您的脚本。

当然，我假设您是在脚本之前加载jQuery库(以及在调用tagsinput和typeahead库之前)。