twitter-bootstrap Bootstrap 3.0 RC1 的预输入问题

Typeahead problems with Bootstrap 3.0 RC1

提问by javsmo

I'm trying to use Twitter Typeaheadwith Bootstrap 3 RC1, because Bootstrap dropped its own typeahead plugin on version 3.

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

I'm using the following HTML on my form:

我在表单上使用以下 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>

Without adding Typeahead, the search input field displays like this:

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

Then I added Typeahead like this:

然后我像这样添加了 Typeahead：

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

And the field became smaller, with a white rectangle inside it.

场变得更小，里面有一个白色的矩形。

Am I doing something wrong or it's just a bug on Typeahead or Bootstrap 3 RC1?

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

回答by Bass Jobsen

update 14 feb 2014

2014 年 2 月 14 日更新

As mentioned by laurent-warteltry https://github.com/hyspace/typeahead.js-bootstrap3.lessor https://github.com/bassjobsen/typeahead.js-bootstrap-cssfor additional CSS to use typeahead.js with Bootstrap 3.1.0.

正如laurent-wartel提到的，尝试https://github.com/hyspace/typeahead.js-bootstrap3.less或https://github.com/bassjobsen/typeahead.js-bootstrap-css以获得额外的 CSS 以使用 typeahead.js使用 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

或者使用带有新 Bloodhound 建议引擎的“旧”（TB 2）插件：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.

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

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:

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

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

这个跨度没有 100% 所以在里面输入。要修复添加到您的 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:

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

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

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

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

update

更新

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

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

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

New bootply: http://bootply.com/86305

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

回答by Laurent W.

Have a look at typeahead.js-bootstrap3.less.

看看typeahead.js-bootstrap3.less。

It works great with the latest version of Bootstrap (v3.0.3) and allows you to keep your custom theming. There is also a .css file with default bootstrap theming.

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

回答by 3176243

Typeahead.js css fixing also have problems with input groups (corners rounding), i found somewhere info that it breaks on modals, etc. Additionaly https://github.com/jharding/typeahead.js-bootstrap.cssis no longer mantained so i am going to give a try for Bass Jobsen solution ;)

Typeahead.js css 修复也有输入组的问题（角舍入），我发现它在模态等上中断的某处信息。另外https://github.com/jharding/typeahead.js-bootstrap.css不再被维护所以我要尝试一下 Bass Jobsen 的解决方案；)

回答by lukiller

After a lot of research with no luck at all adding styles, I finally fixed it adding one line inside the constructor Typeahead (bootstrap.js or bootstrap-typeahead.js depending on your version):

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

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

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

Here's the code:

这是代码：

/* 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());
}

回答by Krzysztof Wilczek

Instead Twitter Typeahead, try to use bootstrap-select. This library is integrated into the Bootstrap 3 and has a wider functionality.

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