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

Question

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

我们有以下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']
    }
    });
};

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

Answer 1

同样的问题在这里 解决了丢弃原始typeahead.js(与Bootstrap 3不兼容)和使用bootstrap3-typeahead.js(https://github.com/bassjobsen/Bootstrap-3-Typeahead)的问题.

而且,你不需要添加(实际上在某些情况下你必须删除它才能工作)

data-role="tags input"

当你指定

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

Answer 2

我认为源属性应该是一个函数。

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