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

我不确定回答这个问题是否为时已晚但是我遇到了同样的问题，我使用typeahead for bootstrap 3和下面的代码片段。希望这会有所帮助...

<input id="my-tags" type="text" placeholder="Add tags" data-provide="typeahead"/>

 <script type="text/javascript">
           var colors = ["red", "blue", "green", "yellow", "brown", "black"];
           var elt = $('#my-tags');
           elt.typeahead();
           $('#my-tags').tagsinput({
                typeahead: {
                     source: colors
                }
           });
  </script>

Answer 3

我想澄清其他一些答案，因为他们说的不够清楚。

目前，在大气层上输入打击的最高票数是sergeyt：typeahead。显然，使用这个软件包时会出现一些问题。

在摆弄了大约一个小时之后，我寻找了另一种选择。安装mrt后：bootstrap3-typeahead - 一切都按预期工作。

因此，如果您遇到问题，我建议您尝试使用该软件包。

Answer 4

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

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

Answer 5

花了我几个小时，但这里有什么对我有用：除了使用bootstrap3-typeahead（而不是typehead.js）我还使用了旧版本的v3.1.1。

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

5 个答案: