jquery - Bootstrap 3 typeahead 不适用于 bootstrap 标签

Question

我正在关注以下链接中的教程，bootstrap3-tutorial .现在在该链接中有一个示例，如下所示，

HTML代码，

<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />

jQuery 代码，

$('input').tagsinput({
  typeahead: {
    source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
  }
});

当我输入“S”时，我应该会得到“悉尼”的建议，但问题是我没有收到任何建议。以下是我正在导入的文件，

<link href="bootstrap3.min.css" rel="stylesheet">
        <link href="typeaheadjs.css" rel="stylesheet">    
    <script src="jquery.js"></script>
    <script src="bootstrap3.min.js"></script>
    <script src="typeahead.js"></script>

那么为什么我没有收到任何建议？您还可以向我推荐一些其他方式，我可以通过这些方式生成有关创建 Bootstrap 标记的建议。

Answer 1

您应该删除 data-role="tagsinput"，因为您正在直接调用插件。

此外，将 Id 添加到 input。

所以你应该变成:

<input type="text" id="id1" value="Amsterdam,Washington,Sydney,Beijing,Cairo" />

并且使用应该将您的 jquery 更改为:

$(function () {
    $('#id1').tagsinput({
        typeahead: {
            source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
        }
    });
});

这应该有效。