Mieszanie Typeahead.js i Bootstrap 3

Question

Mam aplikację, która używa Bootstrap 3 i Typeahead. Z jakiegoś powodu, zaraz po dodaniu Typeahead.js, stylizacja zostanie nieprawidłowo sformatowana, co można zobaczyć za pomocą this JSFiddle. Poniższy HTML wygląda świetnie:

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

Jak tylko go zainicjować z wpisywanie znaków z wyprzedzeniem, jak pokazano poniżej, wygląda okropnie.

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

Jeśli to this CSS code for using typeahead.js with Bootstrap 3, HTML będzie wyglądać zgodnie z oczekiwaniami bez zmian:

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

wpisywanie znaków z wyprzedzeniem Twittera nie działają bezpośrednio z Bootstrap 3. DOM strukturę rozwijanej menu używane przez typeahead.js różni się od struktury DOM menu rozwijanego Bootstrap. Będziesz musiał załadować dodatkowe pliki CSS, aby uzyskać menu rozwijane typeahead.js, aby dopasować je do domyślnego motywu Bootstrap. Możesz pobrać podstawowe CSS tutaj lub użyć pliku LESS, aby zintegrować go z projektem.

Dołącz plik CSS po Bootstrap CSS w kodzie HTML:

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

Źródło: https://github.com/bassjobsen/typeahead.js-bootstrap-css

Answer 2

Jeśli skontrolować DOM z typeahead zainicjowany należy zauważyć, że skrypt opakowuje <input> z <span>. Bootstrap oczekuje pewnej struktury, która nie jest już taka sama po uruchomieniu typeahead.