混合Typeahead.js和Bootstrap 3

Question

我有一个使用Bootstrap 3和Typeahead的应用程序.出于某种原因,只要我添加Typeahead.js,样式就会被错误格式化,你可以看到这个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

如果您包含此CSS代码以使用带有Bootstrap 3的typeahead.js,则HTML将按预期显示而不进行任何修改:

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

Twitter的typeahead不能直接使用Bootstrap 3. typeahead.js使用的下拉菜单的DOM结构与Bootstrap下拉菜单的DOM结构不同.您需要加载一些额外的CSS才能获得typeahead.js下拉菜单以适应默认的Bootstrap主题.您可以在此处下载基本CSS,或使用LESS文件将其集成到您的项目中.

在HTML中包含Bootstrap 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