ブートストラップ3 - テキスト入力下での検索結果のドロップダウン

Question

私は、ブートストラップ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に結果を投げてテストしました。

ここでは、これらの結果をテキスト入力下のドロップダウンメニューに表示したいと考えています。最初の結果がバックエンドから返されるとすぐにドロップダウンが表示されます。スニペットを検索しようとしましたが、悲惨に失敗しました。これどうやってするの？

Answer 1

あなたは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は、その使用例です。