將自動完成功能添加到Bootstrap中的Wide Searchbar 3

我一直在過去的幾天內完成我認爲是一項非常簡單的任務：在Bootstrap 3中爲搜索欄提供自動完成功能。我試圖實現的目標是整合它進入Bootstrap 3設計而不會破壞佈局。將自動完成功能添加到Bootstrap中的Wide Searchbar 3

我已經調查的方式同時使用Twitter的typeahead.js和bootstrap3-預輸入..難度

部分原因可能是，我想有一個搜索框大作爲的一部分，「導航欄固定」元素，我用這個解決方案/解決方法：

https://stackoverflow.com/questions/18552714/bootstrap-3-how-to-maximize-input-width-inside-navbar

，我有是，每當我包括預輸入類的SEACH欄樣式變回一個不同的CSS樣式，打破了佈局的挑戰。然後我使用autocomplete.js嘗試了相同的操作。我只想匹配確切的字符串，所以我不關心確切的實現 - 我唯一的要求是：（1）Typeahead /自動完成和（2）自動完成功能的實際級別在這一點上是非常微不足道的，保持寬搜索欄在Bootstrap導航欄搜索欄

任何人有一個想法如何實現這一目標？

來源

2017-05-19 col. slade

看到這個https://jsfiddle.net/wamh2h5h/show/ – Amal

謝謝阿邁勒，這個固定的問題！你能解釋爲什麼這個問題發生，它是如何在小提琴中解決這個問題的？再次，非常感謝！ –

嗨，上校。如果只添加了typeahead.js，slade.it可以正常工作。但是，當添加typeahead.bundle.js和bootstrap-tagsinput.min.js時，搜索框會斷開。請參閱https://plnkr.co/edit/nnDcPgWAmrizkbTP5iBp?p=預習 – Amal

試試這個代碼

var indicator=["aaa","abc","def","rrr","yyyt"]; 
function searchautocomplete(itemclass,data){ 
     $(itemclass).typeahead({ 
        hint: true, 
        highlight: true, 
        source:data, 
        limit:data.length 
     }); 
} 
searchautocomplete(".form-control",indicator);

DEMO

來源

2017-05-22 02:44:28 Amal

將自動完成功能添加到Bootstrap中的Wide Searchbar 3

回答

相關問題