在Twitter上的CSS问题与引导3

时间：2021-12-05 15:57:02

With the release of Bootstrap 3. Typeahead has been removed in favor of this:
https://github.com/twitter/typeahead.js

与发布的引导3。Typeahead已经被删除了，比如https://github.com/twitter/typeahead.js

Ive integrated it successfully on remote fetching of data

我成功地将它集成到远程抓取数据上。

but Im having problem with the autocompletion

但我对自动补全有意见

在Twitter上的CSS问题与引导3

as you can see there are two text appearing on the textbox.

可以看到，文本框中有两个文本。

I've included the css (https://github.com/jharding/typeahead.js-bootstrap.css) as said in the documentation but no luck.

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

any help or suggestion would be appreciated.

如有任何帮助或建议，我们将不胜感激。

jsfiddle showing the issue:
http://jsfiddle.net/KrtB5/

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

HTML

HTML

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

Javascript:

Javascript:

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

14 个解决方案

#1

58  

EDIT: Updated for Bootstrap 3.0 EDIT 2: Typeahead call was modified. See new jsfiddle

编辑:更新为Bootstrap 3.0编辑2:修改Typeahead调用。看到新的jsfiddle

After playing around with the styling it looks like the form-control class doesn't quite line-up with the tt-hint. So I made sure the margins and borders line up. Taking Hieu Nguyen's answer and adding border-radius and support for input-small/input-large

在处理样式之后，看起来表单控件类并没有使用tt-hint。所以我确保了边距和边距对齐。根据阮氏的回答，增加边界半径，支持投入少/投入大

CSS

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

Script for input-small/input-large

脚本input-small / input-large

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

Updated jsfiddle: http://jsfiddle.net/KrtB5/542/

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

#2

16  

Hmm it looks like .form-control is a new class in Bootstrap 3 RC and it's a culprit of this issue (no doubt this is only RC version with many issues), you can just copy style of that class to .tt-hint class. So:

嗯，看起来。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;
}

Working fiddle: http://jsfiddle.net/KrtB5/2/

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

Update which works better with jQuery 1.9.1 and Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13

使用jQuery 1.9.1和Bootstrap 3.0.0更有效地更新:http://jsfiddle.net/KrtB5/13。

#3

14  

Check this out:

看看这个:

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

#4

7  

There's also an unofficial port of the Bootstrap 2 typeahead plugin:

还有一个非官方端口的引导2类型前置插件:

Bootstrap 3 Typeahead

引导3 Typeahead

在Twitter上的CSS问题与引导3

It doesn't require any additional CSS and it works with the latest version of Bootstrap.

它不需要任何额外的CSS，并且与最新版本的Bootstrap一起工作。

Here's a demo on Plunker.

这是柱塞的演示。

#5

4  

Not only .tt-hint is brocken, but other css-classes too.

不仅。tt-hint是布洛克，其他css类也是。

The best solution, working in all browsers, is to add the additional css, which repairs the css problems between Typeahead.js and Bootstrap 3:

在所有浏览器中工作的最佳解决方案是添加额外的css，它可以修复Typeahead之间的css问题。js和引导3:

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

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

#6

4  

If you are using bootstrap.less, you have it much easier. BS 3 installs LESS 1.4.1 which now includes 'extend' goodness. see Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?

如果您正在使用引导程序。少一点，你就容易多了。bs3安装了较少的1.4.1，现在包含了“扩展”的好处。见较少和引导:如何使用span3(或spanX[任何数字])类作为mixin?

Extend is killer feature for LESS now. You can now fully inherit (explicit named) classes. So no need to copy properties as in Hieu Nguyen's and Nick P's CSS answers. LESS will do it all with:

扩展是减少现在的杀手功能。现在可以完全继承(显式命名)类。所以不需要像在Hieu Nguyen和Nick P的CSS答案中复制属性。只有少数人才能做到:

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

The https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less less code is broken for BS 3. I used it as a starting point, and also added making the dropdown not word wrap as per the BS 2 typeahead. My final less file is:

jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.较少的代码被破坏。我用它作为起点，并添加了下拉菜单，而不是按bs2类型前置。我最后的小文件是:

.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://*.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
}

#7

3  

A comprehensive solution (recommended in this bug report at Typeahead)

一个全面的解决方案(在Typeahead的错误报告中推荐)

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

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

1  

This worked for me. You may need to play with top and left numbers to get it right.

这为我工作。你可能需要用左上方的数字来表示正确。

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

#9

1  

Based in Andreas's answer I'd bet for the following using less:

根据安德烈亚斯的回答，我打赌用更少的钱:

.tt-hint { 
   .form-control;
}

#10

0  

The solution that I came up with, was to simply add another CSS class (from-group-lg) to my form-group element.

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

My HTML:

我的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>

In my scss file I added:

在我的scss文件中，我补充说:

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

#11

0  

From Typeahead problems with Bootstrap 3.0 RC1: As mentioned by [laurent-wartel][2] try https://github.com/hyspace/typeahead.js-bootstrap3.less or https://github.com/bassjobsen/Bootstrap-3-Typeahead for additional CSS to use typeahead.js with Bootstrap 3.1.0.

从Typeahead问题和Bootstrap 3.0 RC1:正如[laurent-wartel][2]所提到的，可以尝试使用https://github.com/hyspace/typeahead.js-bootstrap3.less或https://github.com/bassjobsen/bootstrap -3 Typeahead来使用Typeahead。与引导3.1.0 js。

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

或者使用“旧”(TB 2)插件与新的侦探犬建议引擎:https://github.com/bassjobsen/bootstrap -3 typeahead/issues /26

#12

0  

A cleaner Less solution

少清洁解决方案

.tt-small {

    .twitter-typeahead {

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

        &> .tt-hint {

            &:extend(.form-control);

            color: @medium-gray;

        }
    }
}

Where the markup looks something like:

标记看起来如下所示:

<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

0  

Another approach to make Twitter Typeahead to work with Bootstrap 3.

另一种使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','');

Then, in your LESS stylesheet, you can add the following:

然后，在较少的样式表中，可以添加以下内容:

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

0  

No need to go thru any of these complicated implementations, just add

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

style="position: relative"

To the parent element. It’s using absolute positioning, it just needs to know what “absolute” you’re referring to.

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

#1

58  

EDIT: Updated for Bootstrap 3.0 EDIT 2: Typeahead call was modified. See new jsfiddle

编辑:更新为Bootstrap 3.0编辑2:修改Typeahead调用。看到新的jsfiddle

After playing around with the styling it looks like the form-control class doesn't quite line-up with the tt-hint. So I made sure the margins and borders line up. Taking Hieu Nguyen's answer and adding border-radius and support for input-small/input-large

在处理样式之后，看起来表单控件类并没有使用tt-hint。所以我确保了边距和边距对齐。根据阮氏的回答，增加边界半径，支持投入少/投入大

CSS

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

Script for input-small/input-large

脚本input-small / input-large

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

Updated jsfiddle: http://jsfiddle.net/KrtB5/542/

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

#2

16  

Hmm it looks like .form-control is a new class in Bootstrap 3 RC and it's a culprit of this issue (no doubt this is only RC version with many issues), you can just copy style of that class to .tt-hint class. So:

嗯，看起来。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;
}

Working fiddle: http://jsfiddle.net/KrtB5/2/

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

Update which works better with jQuery 1.9.1 and Bootstrap 3.0.0: http://jsfiddle.net/KrtB5/13

使用jQuery 1.9.1和Bootstrap 3.0.0更有效地更新:http://jsfiddle.net/KrtB5/13。

#3

14  

Check this out:

看看这个:

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

#4

7  

There's also an unofficial port of the Bootstrap 2 typeahead plugin:

还有一个非官方端口的引导2类型前置插件:

Bootstrap 3 Typeahead

引导3 Typeahead

在Twitter上的CSS问题与引导3

It doesn't require any additional CSS and it works with the latest version of Bootstrap.

它不需要任何额外的CSS，并且与最新版本的Bootstrap一起工作。

Here's a demo on Plunker.

这是柱塞的演示。

#5

4  

Not only .tt-hint is brocken, but other css-classes too.

不仅。tt-hint是布洛克，其他css类也是。

The best solution, working in all browsers, is to add the additional css, which repairs the css problems between Typeahead.js and Bootstrap 3:

在所有浏览器中工作的最佳解决方案是添加额外的css，它可以修复Typeahead之间的css问题。js和引导3:

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

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

#6

4  

If you are using bootstrap.less, you have it much easier. BS 3 installs LESS 1.4.1 which now includes 'extend' goodness. see Less and Bootstrap: how to use a span3 (or spanX [any number]) class as a mixin?

如果您正在使用引导程序。少一点，你就容易多了。bs3安装了较少的1.4.1，现在包含了“扩展”的好处。见较少和引导:如何使用span3(或spanX[任何数字])类作为mixin?

Extend is killer feature for LESS now. You can now fully inherit (explicit named) classes. So no need to copy properties as in Hieu Nguyen's and Nick P's CSS answers. LESS will do it all with:

扩展是减少现在的杀手功能。现在可以完全继承(显式命名)类。所以不需要像在Hieu Nguyen和Nick P的CSS答案中复制属性。只有少数人才能做到:

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

The https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less less code is broken for BS 3. I used it as a starting point, and also added making the dropdown not word wrap as per the BS 2 typeahead. My final less file is:

jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.较少的代码被破坏。我用它作为起点，并添加了下拉菜单，而不是按bs2类型前置。我最后的小文件是:

.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://*.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
}

#7

3  

A comprehensive solution (recommended in this bug report at Typeahead)

一个全面的解决方案(在Typeahead的错误报告中推荐)

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

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

1  

This worked for me. You may need to play with top and left numbers to get it right.

这为我工作。你可能需要用左上方的数字来表示正确。

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

#9

1  

Based in Andreas's answer I'd bet for the following using less:

根据安德烈亚斯的回答，我打赌用更少的钱:

.tt-hint { 
   .form-control;
}

#10

0  

The solution that I came up with, was to simply add another CSS class (from-group-lg) to my form-group element.

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

My HTML:

我的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>

In my scss file I added:

在我的scss文件中，我补充说:

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

#11

0  

From Typeahead problems with Bootstrap 3.0 RC1: As mentioned by [laurent-wartel][2] try https://github.com/hyspace/typeahead.js-bootstrap3.less or https://github.com/bassjobsen/Bootstrap-3-Typeahead for additional CSS to use typeahead.js with Bootstrap 3.1.0.

从Typeahead问题和Bootstrap 3.0 RC1:正如[laurent-wartel][2]所提到的，可以尝试使用https://github.com/hyspace/typeahead.js-bootstrap3.less或https://github.com/bassjobsen/bootstrap -3 Typeahead来使用Typeahead。与引导3.1.0 js。

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

或者使用“旧”(TB 2)插件与新的侦探犬建议引擎:https://github.com/bassjobsen/bootstrap -3 typeahead/issues /26

#12

0  

A cleaner Less solution

少清洁解决方案

.tt-small {

    .twitter-typeahead {

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

        &> .tt-hint {

            &:extend(.form-control);

            color: @medium-gray;

        }
    }
}

Where the markup looks something like:

标记看起来如下所示:

<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

0  

Another approach to make Twitter Typeahead to work with Bootstrap 3.

另一种使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','');

Then, in your LESS stylesheet, you can add the following:

然后，在较少的样式表中，可以添加以下内容:

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

0  

No need to go thru any of these complicated implementations, just add

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

style="position: relative"

To the parent element. It’s using absolute positioning, it just needs to know what “absolute” you’re referring to.

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

标签：

相关文章