Typeahead插件和Bootstrap标签输入插件Meteor无法正常工作

本文介绍了Typeahead插件和Bootstrap标签输入插件Meteor无法正常工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我们安装了'bootstrap-tagsinput.js'和'typeahead'插件，用于为我们其中一种形式的输入字段的标签做一个tyepahead下拉列表。硬编码标签正常工作。但是，预先输入部分无法正常工作。

We've installed 'bootstrap-tagsinput.js' and the 'typeahead' plugin for doing a tyepahead drop down for tags for an input field in one of our forms. The hardcoded tags work properly. However, the typeahead part doesnt work properly.

我们有以下HTML：

<div class="form-group"> <label>Types</label><br /> <input class="form-control tags" type="text" name="type" value="Wordpress, Guitar Hero" data-role="tagsinput" /> </div>

以及以下JS：

Template.form.rendered = function() { // Initialise tags input $('.tags').tagsinput({ typeahead: { source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo'] } }); };

在我们输入时，我们希望它能够拾取以下数据项并显示在前面的类型下拉列表中。但是，它只显示硬编码类型，当我们输入类似于源数据的内容时，它不会显示在下拉列表中。

As we type, we would like it to pickup the following data items and display in a type ahead dropdown. However, it only display the hardcoded types and when we type something similar to the source data, it does not show in a dropdown.

推荐答案

这里有同样的问题。解决了丢弃原始typeahead.js（与Bootstrap 3不兼容）并使用 bootstrap3-typeahead.js （ github/bassjobsen/Bootstrap-3-Typeahead ）。

Same problem here. Resolved dropping the original typeahead.js (that is not compatible with Bootstrap 3) and using bootstrap3-typeahead.js (github/bassjobsen/Bootstrap-3-Typeahead).

此外，你不要需要添加（实际上在某些情况下你必须删除它才能工作）

Moreover, you don't need to add (actually on some occasions you MUST remove it in order to work)

data-role="tags input"

指定时

$('#my_field').tagsinput({ typeahead: ...