使用Bootstrap Tokenfield和Bootstrap 3 Typeahead

我已經將Bootstrap 3 Typeahead庫集成到我的web應用程序中。我想爲文本輸入字段添加一個標記系統，所以我查看了Bootstrap Tokenfield。我無法使這兩個圖書館彼此合作。 Tokenfield庫正在工作，但Typeahead建議未顯示。這裏是我的一個輸入端HTML：使用Bootstrap Tokenfield和Bootstrap 3 Typeahead

<input name="tags-input" class="form-control" id="tags-input" type="text" data-source='["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7"]' data-provide="typeahead" data-items="4" autocomplete="off">

這裏是我的文本輸入的JavaScript：

$(document).ready(function() 
{ 
    $("#tags-input").tokenfield(); 
});

我一直在這一段時間，並可以用一隻手。我不確定如何更改我的HTML/JavaScript以使兩個庫都能正常工作。預先感謝任何幫助！

更新（2015年7月20日）

我得到的引導3下拉事先鍵入的內容出現，但它不與插件正常工作。我找不到使用數據屬性設置數據源的方法，所以我使用了JavaScript。這是我的新代碼：

<input name="tags-input" class="form-control" id="tags-input" type="text" autocomplete="off">

而這裏的新的JavaScript：

$(document).ready(function() 
{ 
    $("#tags-input").tokenfield(
    { 
     typeahead: { source: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7"] } 
    }); 
});

在這一點上我想知道如果它甚至值得保持這個。我可能會轉而使用Twitter Typeahead插件。不過，我真的很喜歡我如何使用Bootstrap 3 Typeahead的數據屬性。

來源

2015-07-19 Alexander

Tokenfield顯示兩個在他們的演示中一起工作 – sharf

@sharf謝謝您的評論。我已經看過演示，但它似乎不像Bootstrap 3 Typeahead庫一樣工作。任何進一步的幫助將不勝感激。 – Alexander

我結束了切換到Bootstrap Tags Input插件，因爲它與Bootstrap 3 Typeahead插件效果更好。以下是我用它：

HTML

<input name="tags-input" class="form-control" id="tags-input" type="text" autocomplete="off">

的JavaScript

$(document).ready(function() 
{ 
    $("#tags-input").tagsinput(
    { 
     typeahead: { source: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7"] } 
    }); 

    // Handle the event that fires when a tag is added 
    $("#tags-input").on('itemAdded', function(event) 
    { 
     // Hide the Bootstrap 3 Typeahead dropdown menu since it doesn't hide automatically for some reason 
     $(".typeahead.dropdown-menu").hide(); 

     // Clear the value of the tagsinput's internal <input> element, which is used for adding tags 
     $(this).tagsinput('input').val(""); 
    }); 
});

的JavaScript的第一個塊（$("#tags-input").tagsinput...）初始化標籤輸入插件。在那之後，我創建了一個事件監聽器，每當一個新的標籤添加到解決以下問題：

標籤添加
經過預輸入項目後的預輸入下拉菜單不躲被選中， typeahead value is duplicated in the input

如可以在JavaScript的評論中可以看出，在事件偵聽器itemAdded事件的代碼隱藏在下拉菜單中，並清除重複的輸入值。我不完全確定爲什麼會展示這些行爲，但我猜他們是更新後的jQuery庫的結果。

上面的解決方案在我的測試中完美地工作。希望這可以幫助別人！

來源

2015-07-21 23:29:52 Alexander

使用Bootstrap Tokenfield和Bootstrap 3 Typeahead

回答

相關問題