jquery - 使用 Bootstrap 3 在 Twitter Typeahead 上的 CSS 问题

Question

随着 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']
})

score 59 · Accepted Answer

编辑：为 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;
}

小输入/大输入脚本

$('.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/

score 16 · Accepted Answer

嗯，它看起来像是.form-controlBootstrap 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

score 14 · Accepted Answer

14

看一下这个：

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

于 2013-09-17T09:27:05.847 回答

score 7 · Accepted Answer

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

Bootstrap 3 预输入

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

这是关于 Plunker的演示。

score 4 · Accepted Answer

如果你使用的是 bootstrap.less，你会更容易。BS 3 安装 LESS 1.4.1，现在包括“扩展”优点。请参阅Less 和 Bootstrap：如何使用 span3（或 spanX [任意数字]）类作为 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.less 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
}

score 3 · Accepted Answer

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

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

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

score 3 · Accepted Answer

一个全面的解决方案（在 Typeahead的这个错误报告中推荐）

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;
}

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

1

根据安德烈亚斯的回答，我打赌以下使用更少：

.tt-hint { 
   .form-control;
}

于 2013-11-07T22:29:36.707 回答

score 0 · Accepted Answer

我想出的解决方案是简单地将另一个 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;
}

score 0 · Accepted Answer

来自Bootstrap 3.0 RC1 的 Typeahead 问题：正如 [laurent-wartel][2] 所述，尝试https://github.com/hyspace/typeahead.js-bootstrap3.less或https://github.com/bassjobsen/Bootstrap- 3-Typeahead用于附加 CSS 以将 typeahead.js 与 Bootstrap 3.1.0 一起使用。

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

score 0 · Accepted Answer

更清洁的解决方案

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

score 0 · Accepted Answer

使 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);
  }

}

score 0 · Accepted Answer

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

style="position: relative"

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

jquery - 使用 Bootstrap 3 在 Twitter Typeahead 上的 CSS 问题

14 回答 14

Related

Reference