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'时，预期会收到建议'Sydney'，但问题是我没有得到任何建议。 以下是我要导入的文件，

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

那么，为什么我没有得到任何建议？ 您还可以通过其他方式向我提出建议，通过这些方式可以生成有关创建引导标记的建议。

Answer 1

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

另外，在input添加一个ID。

因此，您应该成为：

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

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

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

这应该工作。