使用 Bootstrap 3 在 Twitter Typeahead 上的 CSS 问题答案

【问题标题】：CSS issue on Twitter Typeahead with Bootstrap 3使用 Bootstrap 3 在 Twitter Typeahead 上的 CSS 问题
【发布时间】：2013-08-06 05:15:29
【问题描述】：

随着 Bootstrap 3 的发布。Typeahead 已被移除以支持此功能：
https://github.com/twitter/typeahead.js

我已经成功地将它集成到远程获取数据中

但是我的自动补全有问题

如您所见，文本框上出现了两个文本。

如文档中所述，我已包含 css (https://github.com/jharding/typeahead.js-bootstrap.css)，但没有运气。

任何帮助或建议将不胜感激。

jsfiddle 显示问题：
http://jsfiddle.net/KrtB5/

HTML

<body>
    <div class="container">
        <label>State</label> <input type="text" class="typeahead form-control" />
    </div>
</body>

Javascript：

$('.typeahead').typeahead({
    name: 'Some name',
    local: ['test', 'abc', 'def']
})

【问题讨论】：

除了 Bootstrap 之外，您还有其他用于输入的 CSS 吗？你能尝试创建一个 jsfiddle 吗？
只是引导程序 3。问题似乎是 typehead.js 正在添加一个额外的输入文本框，该文本框与实际搜索查询文本框重叠。
我无法重现这个。你能发布你的 HTML 以及你在哪里初始化 typeahead 吗？我的小提琴：jsfiddle.net/md6bx
我不使用小提琴。我试图编辑我的帖子以包含 Html，但我遇到了格式问题，因为我使用的是 Razor View ASP MVC。
使用 twitter bootstrap 3 wsnippets.com/…987654325@ 的 typeahead 的最佳教程和演示

标签： jquery css typeahead.js twitter-bootstrap-3

【解决方案1】：

编辑：针对 Bootstrap 3.0 更新 编辑 2：Typeahead 调用已修改。查看新的 jsfiddle

在玩弄了样式之后，看起来表单控件类与 tt-hint 不太相符。所以我确保边距和边框对齐。采用 Hieu Nguyen 的回答并添加边界半径和对 input-small/input-large 的支持

CSS

.twitter-typeahead .tt-hint
{
    display: block;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
    border-radius:4px;
}

.twitter-typeahead .hint-small
{
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 3px;
    line-height: 1.5;
}

.twitter-typeahead .hint-large
{
    height: 45px;
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
    line-height: 1.33;
}

input-small/input-large 脚本

$('.typeahead.input-sm').siblings('input.tt-hint').addClass('hint-small');
$('.typeahead.input-lg').siblings('input.tt-hint').addClass('hint-large');

更新 jsfiddle：http://jsfiddle.net/KrtB5/542/

【讨论】：

它在 FF22 中对我来说效果很好，但感谢您的建设性反馈和否决...
提示 .tt-hint 类需要与您的字段具有相同的属性，才能获得正确的位置。
正是我想要的！谢谢。
优秀。我必须添加样式以支持输入字段上方带有标签的标准表单。 .twitter-typeahead {display: block !important;} 然后是内联表单.form-inline .twitter-typeahead {display: inline-block !important;}
我对小提琴进行了一些更改以使重叠工作，并且光标选择正确：jsfiddle.net/KrtB5/541

【解决方案2】：

嗯，看起来.form-control 是 Bootstrap 3 RC 中的一个新类，它是这个问题的罪魁祸首（毫无疑问，这只是有很多问题的 RC 版本），你可以将该类的样式复制到 .tt-hint班级。所以：

.twitter-typeahead .tt-hint {
    display: block;
    height: 38px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    border: 1px solid transparent;
}

工作小提琴：http://jsfiddle.net/KrtB5/2/

更新，它在 jQuery 1.9.1 和 Bootstrap 3.0.0 上效果更好：http://jsfiddle.net/KrtB5/13

【讨论】：

我想这会奏效。我只需要为 .input-xxx、小、大、中添加一些 css。
这里的问题是 js 插件将你输入的背景颜色设置为透明。要修复将其设置回白色。请参阅：jsfiddle.net/bassjobsen/KrtB5/7。另请参阅：stackoverflow.com/questions/18167246/…。请注意，这里的解决方案取决于固定的大小和高度，例如line-height: 1.428571429;，这使得它不太有用
使用 jquery 1.9.1、BS 3.0.0 获取一些更新并更改 .tt-hint 的填充，这应该可以工作：jsfiddle.net/KrtB5/13
BS 3.0.0 版本看起来不太好。
@Shawn：您的 JSFiddle 是我见过的更好的解决方案之一。但是与例如相比，正在键入的单词的“剩余字符”的字体颜色仍然不正确。 twitter.github.io/typeahead.js/examples。知道如何修复它吗？

【解决方案3】：

看看这个：

$('#foo').typeahead(...);
$('.tt-hint').addClass('form-control');

【讨论】：

【解决方案4】：

Bootstrap 2 typeahead 插件还有一个非官方端口：

Bootstrap 3 Typeahead

它不需要任何额外的 CSS，并且可以与最新版本的 Bootstrap 一起使用。

这是 Plunker 上的 demo。

【讨论】：

这很好用。也许这不是最好的选择，但它满足我的需要。除此之外，我还设置了以下样式，以便下拉菜单与输入字段一样长：.dropdown-menu { display: block; position: static; width: 100%; } 我认为这可能会对某人有所帮助

【解决方案5】：

如果您使用的是 bootstrap.less，您会轻松很多。 BS 3 安装 LESS 1.4.1，现在包括“扩展”优点。见Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?

扩展现在是 LESS 的杀手级功能。您现在可以完全继承（显式命名）类。因此，无需像 Hieu Nguyen 和 Nick P 的 CSS 答案那样复制属性。 LESS 可以做到：

.twitter-typeahead .tt-hint:extend(.form-control all)
{}

https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.lessless 代码在 BS 3 中被破坏。我将其作为起点，还添加了根据 BS 2 typeahead 使下拉菜单不自动换行。我最后的less文件是：

.tt-dropdown-menu
{
    min-width: 160px;
    margin-top: 2px;
    padding: 5px 0;
    /* from BS dropdowns.less .dropdown-menu */
    /* background-color: @dropdownBackground;*/
    background-color: @dropdown-bg;

    /* 
    border: 1px solid #ccc;
    border: 1px solid @dropdownBorder;
    border: 1px solid @dropdownBorder;*/
    border: 1px solid @dropdown-fallback-border; // IE8 fallback
    border: 1px solid @dropdown-border;

    *border-right-width: 2px;
    *border-bottom-width: 2px;

    /*BS2 replaced with BS dropdowns.less .dropdown-menu*/
    /*.border-radius(6px);*/
    border-radius: 6px;

    /*.box-shadow(0 5px 10px rgba(0,0,0,.2));
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;*/
    .box-shadow(0 6px 12px rgba(0,0,0,.175));

    background-clip: padding-box;

}

.tt-suggestion
{
    display: block;
    padding: 3px 20px;
}

    .tt-suggestion.tt-is-under-cursor
    {
        /*color: @dropdownLinkColorHover;
        #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));*/
        color: @dropdown-link-hover-color;
        background-color: @dropdown-link-hover-bg;
    }

        .tt-suggestion.tt-is-under-cursor a
        {
            /*color: @dropdownBackground;*/
            color: @dropdown-bg;
        }

    .tt-suggestion > p
    {
        margin: 0;
        white-space: nowrap !important;     //dont conform suggestion to parent input width
    }


/*https://stackoverflow.com/questions/18059161/css-issue-on-twitter-typeahead-with-bootstrap-3*/
.twitter-typeahead
{
    display: block;
    width: 100%; //BS 3 needs this to inherit this for children
}

.twitter-typeahead .tt-hint:extend(.form-control all)
{
    color: @input-color-placeholder; //show hint distinct from input
}

【讨论】：

你有 .css 文件吗？我不知道如何编译less
对于 CSS 使用 Nick P 的答案。

【解决方案6】：

不仅 .tt-hint 被破坏，其他 css 类也被破坏。

适用于所有浏览器的最佳解决方案是添加额外的 css，它修复了 Typeahead.js 和 Bootstrap 3 之间的 css 问题：

https://github.com/jharding/typeahead.js-bootstrap.css

【讨论】：

不再维护（并且已弃用）

【解决方案7】：

全面的解决方案（在 Typeahead 的 bug report 中推荐）

https://github.com/hyspace/typeahead.js-bootstrap3.less/blob/master/typeahead.css

/*
 * typehead.js-bootstrap3.less
 * @version 0.2.3
 * https://github.com/hyspace/typeahead.js-bootstrap3.less
 *
 * Licensed under the MIT license:
 * http://www.opensource.org/licenses/MIT
 */
.has-warning .twitter-typeahead .tt-input,
.has-warning .twitter-typeahead .tt-hint {
  border-color: #8a6d3b;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-warning .twitter-typeahead .tt-input:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
  border-color: #66512c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
}
.has-error .twitter-typeahead .tt-input,
.has-error .twitter-typeahead .tt-hint {
  border-color: #a94442;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-input:focus,
.has-error .twitter-typeahead .tt-hint:focus {
  border-color: #843534;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
}
.has-success .twitter-typeahead .tt-input,
.has-success .twitter-typeahead .tt-hint {
  border-color: #3c763d;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-input:focus,
.has-success .twitter-typeahead .tt-hint:focus {
  border-color: #2b542c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
}
.input-group .twitter-typeahead:first-child .tt-input,
.input-group .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.input-group .twitter-typeahead:last-child .tt-input,
.input-group .twitter-typeahead:last-child .tt-hint {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.input-group.input-group-sm .twitter-typeahead .tt-input,
.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
select.input-group.input-group-sm .twitter-typeahead .tt-input,
select.input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: 30px;
  line-height: 30px;
}
textarea.input-group.input-group-sm .twitter-typeahead .tt-input,
textarea.input-group.input-group-sm .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-sm .twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-sm .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-input,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.input-group.input-group-lg .twitter-typeahead .tt-input,
.input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: 46px;
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
select.input-group.input-group-lg .twitter-typeahead .tt-input,
select.input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: 46px;
  line-height: 46px;
}
textarea.input-group.input-group-lg .twitter-typeahead .tt-input,
textarea.input-group.input-group-lg .twitter-typeahead .tt-hint,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-input,
select[multiple].input-group.input-group-lg .twitter-typeahead .tt-hint {
  height: auto;
}
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-input,
.input-group.input-group-lg .twitter-typeahead:not(:first-child):not(:last-child) .tt-hint {
  border-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-input,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-bottom-right-radius: 6px;
  border-top-right-radius: 6px;
}
.twitter-typeahead {
  width: 100%;
}
.input-group .twitter-typeahead {
  display: table-cell !important;
  float: left;
}
.twitter-typeahead .tt-hint {
  color: #999999;
}
.twitter-typeahead .tt-input {
  z-index: 2;
}
.twitter-typeahead .tt-input[disabled],
.twitter-typeahead .tt-input[readonly],
fieldset[disabled] .twitter-typeahead .tt-input {
  cursor: not-allowed;
  background-color: #eeeeee !important;
}
.tt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 160px;
  width: 100%;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
  *border-right-width: 2px;
  *border-bottom-width: 2px;
}
.tt-dropdown-menu .tt-suggestion {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor {
  text-decoration: none;
  outline: 0;
  background-color: #f5f5f5;
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion.tt-cursor a {
  color: #262626;
}
.tt-dropdown-menu .tt-suggestion p {
  margin: 0;
}

【讨论】：

【解决方案8】：

这对我有用。您可能需要使用顶部和左侧的数字才能使其正确。

$('#typeahead').typeahead(...);
$(".tt-hint").css('top','3px');
$(".tt-hint").css('left','1px');

【讨论】：

【解决方案9】：

根据 Andreas 的回答，我敢打赌使用 less：

.tt-hint { 
   .form-control;
}

【讨论】：

这对我有用 sass/scss：.tt-hint { @extend .form-control; }

【解决方案10】：

我想出的解决方案是简单地将另一个 CSS 类 (from-group-lg) 添加到我的 form-group 元素中。

我的 HTML：

<div class="form-group form-group-lg">
  <label class="control-label" for="my-large-typeahead">Type to automcoplete:</label>
  <input type="text" class="form-control typeahead" id="my-large-typeahead">
</div>

在我的 scss 文件中我添加了：

.form-group-lg .tt-hint
{
    @extend .input-lg;
}

【讨论】：

【解决方案11】：

来自Typeahead problems with Bootstrap 3.0 RC1：正如 [laurent-wartel][2] 所提到的，尝试使用 https://github.com/hyspace/typeahead.js-bootstrap3.less 或 https://github.com/bassjobsen/Bootstrap-3-Typeahead 获取额外的 CSS，以便在 Bootstrap 3.1.0 中使用 typeahead.js。

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

【讨论】：

【解决方案12】：

更清洁的解决方案

.tt-small {

    .twitter-typeahead {

        display: block !important; // Note: Override inline styles set by JavaScript

        &> .tt-hint {

            &:extend(.form-control);

            color: @medium-gray;

        }
    }
}

标记看起来像这样：

<div class="form-group">
    <label class="col-lg-3 col-sm-3 control-label" for="mydropdown">Dropdown</label>
    <div class="col-lg-6 col-sm-6 tt-mydropdown tt-small">
        <input class="form-control" id="mydropdown" placeholder="Dropdown" type="text">
    </div> <!-- tt-small end -->
</div>

【讨论】：

【解决方案13】：

使 Twitter Typeahead 与 Bootstrap 3 一起使用的另一种方法。

// Using jQuery, we remove the inline styles compulsively added by Twitter Typeahead.
// We need to do this because, if not, styles on our stylesheets won't be able to
// override those inline styles.
$('.twitter-typeahead, .typeahead').attr('style','');

然后，在您的 LESS 样式表中，您可以添加以下内容：

// Twitter Typeahead

.twitter-typeahead {
  position: relative;

  .tt-hint {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: @input-bg;
    border: none;
  }

  .tt-input {
    position: relative;
    vertical-align: top;
  }

  .tt-hint + .tt-input {
    background-color: transparent;
  }

  .tt-dropdown-menu {
    &:extend(.dropdown-menu all);
  }

  .tt-suggestion {
    &:extend(.dropdown-menu > li > a all);
    p {
      margin-bottom: 0;
    }
  }

  .tt-cursor {
    &:extend(.dropdown-menu > .active > a all);
  }

}

【讨论】：

【解决方案14】：

不需要通过任何这些复杂的实现，只需添加

style="position: relative"

到父元素。它使用的是绝对定位，它只需要知道你指的是什么“绝对”。

【讨论】：