Bootstrap 3.0 RC1 的 Typeahead 问题

Question

我正在尝试将 Twitter Typeahead 与 Bootstrap 3 RC1 一起使用，因为 Bootstrap 在版本 3 中删除了自己的 typeahead 插件。

我在表单中使用了以下 HTML：

<div class="well">  
<form>
    <fieldset>
        <div class="form-group">
            <label for="query">Search:</label>
            <input type="text" class="form-control" name="query" id="query" placeholder="Start typing something to search...">              
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </fieldset>
</form>
</div>

不添加 Typeahead，搜索输入字段显示如下：

然后我像这样添加 Typeahead：

<script>
    $('#query').typeahead({        
        local: ['alpha', 'bravo','charlie','delta','epsilon','gamma','zulu']
    });
</script>

这个区域变小了，里面有一个白色的矩形。

我做错了什么还是只是 Typeahead 或 Bootstrap 3 RC1 上的错误？

Answer 1

2014 年 2 月 14 日更新

正如laurent-wartel 所提到的，尝试https://github.com/hyspace/typeahead.js-bootstrap3.less 或https://github.com/bassjobsen/typeahead.js-bootstrap-css 以获得额外的CSS，以便在Bootstrap 3.1.0 中使用typeahead.js。

或将“旧”（TB 2）插件与新的 Bloodhound 建议引擎一起使用：https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

---

Twitter 的 typeahead 似乎还没有为 Twitter 的 Bootstrap 3 做好准备。 要将 Twitter 的 typeahead 与 Twitter 的 Bootstrap 一起使用，您需要 some extra CSS（已弃用，不再维护）。 使用此 CSS 并不能解决您的问题。

在您的示例中，输入字段的宽度不是 100%。这将由 Javascript 引起。 javascript 将输入包装在一个跨度中：

<span class="twitter-typeahead" 
    style="position: relative; display: inline-block; direction: ltr;">

这个跨度没有 100%，所以在里面输入。要修复添加到您的 CSS：

.twitter-typeahead {
  width: 100%;
}

Javascript 将您输入的背景颜色设置为透明。如果您不想更改插件源，我将需要一些额外的 Javascript 来解决此问题：

$('.tt-query').css('background-color','#fff');

现在应该根据您的示例按预期工作。 http://www.bootply.com/73439

更新

最初的问题是针对 Twitter 的 Bootstrap 3.0.0 的 RC1。您还需要添加：

.tt-dropdown-menu {
   width:100%;        
}

新引导：http://bootply.com/86305

Answer 2

看看typeahead.js-bootstrap3.less。

它适用于最新版本的 Bootstrap (v3.0.3)，并允许您保留自定义主题。还有一个带有默认引导主题的 .css 文件。

Answer 3

Typeahead.js css 修复也有输入组的问题（圆角），我在某处发现它在模式等上中断的信息。 另外https://github.com/jharding/typeahead.js-bootstrap.css 已不再托管，因此我将尝试使用 Bass Jobsen 解决方案；）

Answer 4

经过大量研究但没有添加样式，我终于修复了它，在构造函数 Typeahead 中添加了一行（bootstrap.js 或 bootstrap-typeahead.js，具体取决于您的版本）：

this.$menu.width(this.$element.outerWidth());

代码如下：

/* TYPEAHEAD PUBLIC CLASS DEFINITION
 * ================================= */

var Typeahead = function (element, options) {
    this.$element = $(element)
    this.options = $.extend({}, $.fn.typeahead.defaults, options)
    this.matcher = this.options.matcher || this.matcher
    this.sorter = this.options.sorter || this.sorter
    this.highlighter = this.options.highlighter || this.highlighter
    this.updater = this.options.updater || this.updater
    this.source = this.options.source
    this.$menu = $(this.options.menu)
    this.shown = false
    this.listen()
    this.$menu.width(this.$element.outerWidth());
}

Answer 5

尝试使用bootstrap-select，而不是 Twitter Typeahead。该库已集成到 Bootstrap 3 中，具有更广泛的功能。