混合使用Typeahead.js和Bootstrap 3

10

我有一个使用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'
  });
});

如果您添加 .twitter-typeahead { width: 100%; margin-top: 4px; },您将获得更接近原始的结果。 - JonSG
@JonSG - 很遗憾,那对我没有起作用。 - Some User
2个回答

7
如果您包含此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中将CSS文件包含在Bootstrap的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

1
如果您使用已初始化的 typeahead 检查 DOM,您应该注意到脚本将 <input> 包装在 <span> 中。Bootstrap 期望一定的结构,在 typeahead 运行后不再相同。

你尝试了什么?我只是指出引导样式不再正确应用的原因。 - chazsolo

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接