將Bootstrap 3 Typeahead與Bootstrap標記輸入集成

我試圖在Bootstrap-Tagsinput plugin中集成Bootstrap 3 Typeahead plugin（基本上是一個從Bootstrap 3中刪除之前的Bootstrap typeahead功能的端口，如果我理解正確的話）。將Bootstrap 3 Typeahead與Bootstrap標記輸入集成

我沒有問題讓這些工作單獨工作，包括JSON預取typehead功能。我不明白如何整合這兩者。我不認爲它應該太難，但我對JavaScript的知識顯然是缺乏的。

這裏是我的輸入字段：

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

這裏是預輸入插件調用JavaScript的方式：

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

如果它是有幫助的，Tagsinput有一個例子其doc解釋如何實施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')));

但我正在使用不同的插件。我發現那個人在我的頭上。

再次感謝。

來源

2014-04-03 dcclassics

好吧...所以我已經決定使用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-04 03:40:56 dcclassics

將Bootstrap 3 Typeahead與Bootstrap標記輸入集成

回答

相關問題