Mixing Typeahead.js ve Önyükleme 3

Question

Bootstrap 3 ve Typeahead kullanan bir uygulamam var. Bazı nedenlerle, Typeahead.js eklediğimde, stil yanlış biçimlendiriliyor, this JSFiddle ile görebiliyorsunuz. Aşağıdaki HTML harika görünüyor:

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

En kısa zamanda typeahead ile başlatmak olarak aşağıda gösterildiği gibi, bu korkunç görünüyor.

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

Eğer this CSS code for using typeahead.js with Bootstrap 3 eklerseniz, HTML bakacağız değişiklik yapılmadan beklendiği gibi:

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

Twitter'ın typeahead Bootstrap 3. ile açılan DOM yapısını doğrudan çalışmıyor typeahead.js tarafından kullanılan menü, Bootstrap açılır menüsünün DOM yapısından farklıdır. Typeahead.js açılır menüsünü varsayılan Bootstrap temasına uydurmak için bazı ek CSS yüklemeniz gerekir. Temel CSS'yi buradan indirebilir veya projenize entegre etmek için LESS dosyasını kullanabilirsiniz.

HTML'nize Bootstrap CSS sonra CSS dosyasını ekleyin:

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

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

Answer 2

Eğer komut bir <span> ile <input> sarar dikkat etmelidir başlatıldı typeahead ile DOM incelemek edin. Bootstrap, typeahead çalıştırdıktan sonra artık aynı olmayan belirli bir yapı bekliyor.