混合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/

typeahead.js使用的下拉菜单的DOM结构与Bootstrap下拉菜单的DOM结构不同。您需要加载一些额外的CSS，以获得typeahead.js下拉菜单，以适应默认的引导主题。您可以在这里下载基本CSS，或者使用较少的文件将其集成到您的项目中。

在引导程序的CSS之后，将CSS文件包含在HTML中：

<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>。引导是期望某种结构，这不再是相同的后，打字机运行。