web-dev-qa-db-ja.com

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

bootstrap 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に結果をスローしてテストしました。

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

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
13
gwaramadze

データリストを使用できます：

<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 ）。

ここ はそれらの使用例です。

19
Alexander Holman