Bootstrap 3 - risultati della ricerca a discesa sotto input di testo

Question

Ho un input di testo in una barra di navigazione all'interno del framework 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> 

Ecco jsfiddle per questo: http://jsfiddle.net/KKm3M/1/

Ciò che il mio inserimento di testo non viene colpito il database per i risultati di ricerca su pressione di un tasto. Funziona bene, ho provato a lanciare i risultati a un div temporaneo altrove.

Ora mi piacerebbe avere questi risultati visualizzati in un menu a discesa sotto l'input di testo. Il menu a discesa dovrebbe essere visualizzato non appena i primi risultati vengono restituiti dal back-end. Ho provato a cercare frammenti ma ho fallito miseramente. Come posso fare questo?

Answer 1

Si potrebbe utilizzare 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> 

Il supporto del browser è in crescita (caniuse).

Here è un esempio del loro utilizzo.