Typeahead.jsとブートストラップ3を混ぜる

Question

私はブートストラップ3と先読みを使用するアプリを持っています。なんらかの理由で、Typeahead.jsを追加するとすぐに、スタイリングが間違って書式設定され、this JSFiddleと表示されます。次のHTMLはすばらしく見えます：

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

次のようにTypeaheadで初期化すると、ひどく見えます。

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

あなたがthis CSS code for using typeahead.js with Bootstrap 3が含まれている場合、HTMLは変更せずに期待されるようになります。

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

Twitterの先行入力ブートストラップ3.ドロップダウンのDOM構造を直接動作しません。 typeahead.jsで使用されるメニューは、[ブートストラップ]ドロップダウンメニューのDOM構造とは異なります。デフォルトのBootstrapテーマに合わせてtypeahead.jsドロップダウンメニューを表示するには、追加のCSSを読み込む必要があります。ここで基本的なCSSをダウンロードするか、LESSファイルを使用してプロジェクトに組み込むことができます。

は、あなたのHTMLでのブートストラップのCSS後のCSSファイルを含める：

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

出典：https://github.com/bassjobsen/typeahead.js-bootstrap-css

Answer 2

あなたはスクリプトが<span>と<input>をラップしていることに気づくべきで初期化さtypeaheadとDOMを検査した場合。ブートストラップは、先読みの実行後にもはや同じではない特定の構造を期待しています。