Question

我正在我的具有Bootstrap 3主题的Drupal 7网站上尝试进行标签输入和提前输入。我已经从here下载了bootstrap-tagsinput.css和bootstrap-tagsinput.js。我还从here下载了bootstrap3-typeahead.js。现在，我试图用来使所有功能正常运行的代码如下：

<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版本应该与Bootstrap 3兼容。我目前正在避免使用Twitter的typeahead，这需要使用Bootstrap LESS子主题来避免CSS冲突。

Answer 1

有2个问题：

“ jquery”不是script标签的有效媒体类型。
创建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 question上阅读有关它的辩论。

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

当然，我假设您正在脚本之前（以及调用taginput和typeahead库之前）加载jQuery库。

在Bootstrap 3中使用标签输入和预先输入

1 个答案: