引導3 - 下拉式文本輸入下的搜索結果

我在引導3框架內的導航欄中有一個文本輸入。引導3 - 下拉式文本輸入下的搜索結果

<div class="navbar navbar-default navbar-static-top"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Title</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <div class="navbar-form navbar-right"> 
     <div class="form-group"> 
      <input type="text" placeholder="Search..." id="search" class="form-control" /> 
     </div> 
     <a href="#" class="btn btn-success">Contact</a> 
     </div> 
    </div> 
    </div> 
</div>

這裏的jsfiddle爲：http://jsfiddle.net/KKm3M/1/

什麼我的文字輸入不被擊中的按鍵上的搜索結果的數據庫。它工作正常，我測試了將結果扔到別處的臨時div。

現在我想讓這些結果顯示在文本輸入下的下拉菜單中。從後端返回第一個結果後，應該立即顯示下拉列表。試圖尋找片段，但失敗慘敗。我怎樣才能做到這一點？

來源

2013-12-17 gwaramadze

你在找什麼是我想的自動完成。查看[http://twitter.github.io/typeahead.js/](http://twitter.github.io/typeahead.js/），一個用於自動完成的Twitter jQuery庫 – cbayram

謝謝，但我還很遠家。只包含typehead.js會使我的輸入字段完全混亂，並使其對$（「＃search」）選擇器無響應。也許有人可以幫我一個片段？ – gwaramadze

嘗試先閱讀文檔，在[GitHub]上（https://github.com/twitter/typeahead.js）。這是解釋如何開始。如果您仍然遇到麻煩，請發佈新評論。 – aledpardo

你可以使用datalists：

<label for="something"> 
    Input "Something": 
    <input id="something" list="somethingelse"> 
    <datalist id="somethingelse"> 
     <option value="Something"></option> 
     <option value="Something Else"></option> 
     <option value="Another One"></option> 
     <option value="Alpha"></option> 
     <option value="Bravo"></option> 
     <option value="Charlie"></option> 
     <option value="Delta"></option> 
     <option value="Echo"></option> 
     <option value="Foxtrot"></option> 
     <option value="Gamma"></option> 
    </datalist> 
</label>

的瀏覽器支持增長（caniuse）。

Here是他們使用的一個例子。

來源

2016-04-11 22:44:59

即使這不是我所需要的甚至是尋找的東西;我愛你如何在沒有使用JS的情況下製作它。爲你+1我的朋友。 – Paramone

引導3 - 下拉式文本輸入下的搜索結果

回答

相關問題