javascript - 混合 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's typeahead don't work direct with Bootstrap 3. The DOM structure of the dropdown menu used by typeahead.js differs from the DOM structure of the Bootstrap dropdown menu. You'll need to load some additional CSS in order to get the typeahead.js dropdown menu to fit the default Bootstrap theme. You can download the basic CSS here, or use the LESS file to integrate it into your project.

在您的 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