Question

我正在尝试使用Bootstrap 3 Typeahead plugin集成Bootstrap-Tagsinput plugin（基本上是旧的Bootstrap预先输入功能的端口，然后在Bootstrap 3中删除它，如果我理解的话）。

我可以单独使用它们，包括JSON预取预先输入功能。我不明白如何整合这两者。我不认为它应该太难，但我对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')));

但我正在使用不同的插件。我发现有一个在我头上。

再次感谢。

Answer 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);

希望有人能受益。

将Bootstrap 3 Typeahead与Bootstrap Tagsinput集成

1 个答案: