在 Bootstrap 3 中使用 tagsinput 和 typeahead

Posted 2023-03-06

【中文标题】在 Bootstrap 3 中使用 tagsinput 和 typeahead

【英文标题】：Using tagsinput and typeahead with Bootstrap 3

【发布时间】：2019-01-21 15:43:54

【问题描述】：

我正在尝试在具有 Bootstrap 3 主题的 Drupal 7 站点上使用 tagsinput 和 typeahead。我已经从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 似乎不起作用。我选择的 typeahead 版本应该与 Bootstrap 3 兼容。我目前正在避免使用 Twitter typeahead，这需要使用 Bootstrap LESS 子主题来避免 CSS 冲突。

【问题讨论】：

您在第一段中说您正在使用 Bootstrap 3 主题，然后您说您目前正在避免使用 Twitter Bootstrap 3。它是什么？

很抱歉给您带来了困惑。我将修改为 Twitter typeahead。来自来源：“使用 Twitter Bootstrap 3，typeahead 插件已被删除。”

【参考方案1】：

有两个问题：

'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 标记上指定媒体类型（type 属性），浏览器理解您的意思是javascript 脚本。你可以在 *** question 上阅读有关它的辩论。

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

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