jquery - 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

update 14 feb 2014

As mentioned by laurent-wartel try https://github.com/hyspace/typeahead.js-bootstrap3.less or https://github.com/bassjobsen/typeahead.js-bootstrap-css for additional CSS to use typeahead.js with Bootstrap 3.1.0.

Or use use the "old" (TB 2) plugin with the new Bloodhound suggestion engine: https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

---

Twitter's typeahead doesn't seem ready for Twitter's Bootstrap 3. To use Twitter's typeahead with Twitter's Bootstrap you will need some extra CSS (deprecated, no longer maintained). Using this CSS doesn't fix your problems.

In your example the input field don't get a 100% width. This will be cause by the Javascript. The javascript wraps the input in a span:

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

This span don't got a 100% so do input inside it. To fix add to your CSS:

.twitter-typeahead {
  width: 100%;
}

The Javascript sets the background-color of your input to transparent. If you don't want to change the plugin source i will need some additional Javascript to fix this:

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

Now is should work as expected based on your example. http://www.bootply.com/73439

update

The original question was for RC1 for Twitter's Bootstrap 3.0.0. you also need to add:

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

New bootply: 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

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