Bootstrap 3 - dropdown search results under text input

Question

I have a text input in a navigation bar within bootstrap 3 framework.

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

Here is jsfiddle for that: http://jsfiddle.net/KKm3M/1/

What my text input does is hit the database for search results on keypress. It works fine, I tested it throwing results to a temporary div elsewhere.

Now I'd like to have these results show up in a drop down menu under the text input. The drop down should show up as soon as first results are returned from the backend. Tried searching for snippets but failed miserably. How can I do this?

Answer 1

You could use 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>

The browser support is growing (caniuse).

Here is an example of their use.