混合 Typeahead.js 和 Bootstrap 3

Posted 2023-05-07

【中文标题】混合 Typeahead.js 和 Bootstrap 3

【英文标题】：Mixing Typeahead.js and Bootstrap 3

【发布时间】：2016-08-20 05:36:04

【问题描述】：

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

【问题讨论】：

如果添加.twitter-typeahead width：100％;边距顶部：4px； 你会得到更接近原作的东西。

@JonSG - 不幸的是，这对 m 不起作用。

【参考方案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

【参考方案2】：

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

【讨论】：

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