混合 Typeahead.js 和 Bootstrap 3

Question

我有一个使用 Bootstrap 3 和 Typeahead 的应用程序。出于某种原因，我一添加 Typeahead.js, the styling gets misformatted, you can see with 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

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

Answer 2

如果您包含 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

混合 Typeahead.js 和 Bootstrap 3

Mixing Typeahead.js and Bootstrap 3

javascript

jquery

typeahead.js

twitter-bootstrap-3