将 Bootstrap 3 Typeahead 与 Bootstrap Tagsinput 集成答案

【问题标题】：Integrating Bootstrap 3 Typeahead with Bootstrap Tagsinput将 Bootstrap 3 Typeahead 与 Bootstrap Tagsinput 集成
【发布时间】：2014-04-03 23:52:34
【问题描述】：

我正在尝试将Bootstrap 3 Typeahead plugin（如果我理解正确的话，基本上是在 Bootstrap 3 中删除之前的旧 Bootstrap 预输入功能的一个端口）与Bootstrap-Tagsinput plugin 集成。

让这些单独工作没有问题，包括 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')));

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

再次感谢。

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-typeahead bootstrap-tags-input

【解决方案1】：

好的...所以我实际上决定使用 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);

希望有人能从中受益。

【讨论】：