Miscelazione Typeahead.js e Bootstrap 3

Question

Ho un'app che utilizza Bootstrap 3 e Typeahead. Per qualche motivo, non appena aggiungo Typeahead.js, lo stile viene formattato in modo errato, è possibile vedere con this JSFiddle. Il seguente codice HTML sembra fantastico:

<div class="container" style="padding:3rem;"> 
<form class="form-horizontal"> 
    <div class="form-group"> 
    <div class="input-group"> 
     <input type="search" class="form-control" id="myQuery"> 
     <div class="input-group-btn"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="searchIndexButton">Item 1</span> <span class="caret"></span></button> 
     <ul class="dropdown-menu dropdown-menu-right"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
     </ul> 
     </div> 
    </div>        
    </div> 
</form>      
</div> 

Appena inizializzato con Typeahead come mostrato di seguito, sembra terribile.

$(function() { 
    var data = [ 
    { id:1, name:'Tiger' }, 
    { id:2, name:'Bear' } 
    ]; 

    var bh = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.whitespace, 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: data 
    }); 

    $('#myQuery').typeahead(null, { 
    minLength: 1, 
    name: 'suggestions', 
    source: bh, 
    display: 'name' 
    }); 
}); 

Answer 1

Se si include this CSS code for using typeahead.js with Bootstrap 3, il codice HTML apparirà come previsto senza modifiche:

JSFiddle: https://jsfiddle.net/2j94perk/

typeahead di Twitter non funzionano diretto con Bootstrap 3. La struttura del DOM della discesa menu usato da typeahead.js differisce dalla struttura DOM del menu a tendina Bootstrap. Dovrai caricare alcuni CSS aggiuntivi per ottenere il menu a discesa typeahead.js per adattarlo al tema Bootstrap predefinito. Puoi scaricare qui il CSS di base o utilizzare il file LESS per integrarlo nel tuo progetto.

Includere il file CSS dopo la CSS di Bootstrap nel codice HTML:

<link href="bootstrap-3.1.0/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link href="typeaheadjs.css" rel="stylesheet"> 

Fonte: https://github.com/bassjobsen/typeahead.js-bootstrap-css

Answer 2

Se ispezionare il DOM con typeahead inizializzato si dovrebbe notare che lo script avvolge il <input> con un <span>. Bootstrap si aspetta una certa struttura che non è più la stessa dopo l'esecuzione di typeahead.