0

我正在尝试将Bootstrap 3 Typeahead 插件（如果我理解正确的话，基本上是旧 Bootstrap typeahead 功能的一个端口，如果我理解正确的话，它在 Bootstrap 3 中被删除）与Bootstrap-Tagsinput 插件集成。

我可以让它们单独工作，包括 JSON 预取 typeahead 功能。我不明白如何将两者结合起来。我不认为这应该太难，但我对 Javascript 的知识显然缺乏。

这是我的输入字段：

<input type="text" id="tagFilter" data-provide="typeahead" data-role="tagsinput">

这是在 Javascript 中调用 typeahead 插件的方式：

//The typeahead
$.get('tags.php', function(data){
    $("#tagFilter").typeahead({ source:data });
    },'json');

如果有帮助，Tagsinput 在其文档中有一个示例，解释了如何实现 twitter typeahead.js：

$('input').tagsinput();

// Adding custom typeahead support using http://twitter.github.io/typeahead.js
$('input').tagsinput('input').typeahead({
  prefetch: 'citynames.json'
}).bind('typeahead:selected', $.proxy(function (obj, datum) {  
  this.tagsinput('add', datum.value);
  this.tagsinput('input').typeahead('setQuery', '');
}, $('input')));

但我使用的是不同的插件。我发现那个在我头上。

再次感谢。

4

1 回答 1

2

好的...所以我实际上决定使用 Twitter typeahead.js，因为我设法让它工作。我使用了以下代码，请有人指出这不是最好的方法。

<input type="text" id="tagFilter" data-provide="typeahead" value="test,arlington">

$('#tagFilter').tagsinput({
    typeahead: {
       source: $.get('tags.php')
    }
    });

我的 tags.php 文件只是一个列表，我认为它需要做更多的工作才能使其与 JSON 文件中带有键的关联数组一起工作。我决定在我的情况下这样做没有任何好处，因为我只关心用于查询目的的标签名称。

所以我的 tags.php 只是在呼应以下结果：

//the mySQLi query is above...
while ($row = mysqli_fetch_assoc($result)) {
        $tags[] = $row['tag_name'];

    }
echo json_encode($tags);

希望有人可以受益。

于 2014-04-04T03:40:56.720 回答