混合 Typeahead.js 和 Bootstrap 3

Question

我有一个使用 Bootstrap 3 和 Typeahead 的应用程序。出于某种原因，我一添加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 的 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

Answer 2

如果您检查带有 typeahead 初始化的 DOM，您应该注意到脚本用 <span> 包装了 <input>。 Bootstrap 期望某种结构在 typeahead 运行后不再相同。