Bootstrap 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 в другом месте.

Теперь я хочу, чтобы эти результаты отображались в раскрывающемся меню под текстовым вводом. Падение должно появиться, как только первые результаты будут возвращены из бэкэнд. Пробовал поиск фрагментов, но неудачно провалился. Как я могу это сделать?

Ответы

Ответ 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).

Здесь приведен пример их использования.