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

Question

提问by Jaime Sangcap

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

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

Ive integrated it successfully on remote fetching of data

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

but Im having problem with the autocompletion

但我在自动完成方面遇到了问题

enter image description here

在此处输入图片说明

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

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

Answer 1

采纳答案by Nick P

EDIT: Updated for Bootstrap 3.0EDIT 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 不太一致。所以我确保边距和边框对齐。采取 Hieu Nguyen 的回答并添加边界半径和对输入小/输入大的支持

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

输入小/输入大的脚本

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

Answer 2

回答by Hieu Nguyen

Hmm it looks like .form-controlis 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-hintclass. So:

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

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

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

Updatewhich 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

Answer 3

回答by Andreas

Check this out:

看一下这个：

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

Answer 4

回答by Paolo Moretti

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

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

Bootstrap 3 Typeahead

Bootstrap 3 预先输入

Bootstrap 3 Typeahead

Bootstrap 3 预先输入

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

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

Here's a demoon Plunker.

这是一个关于 Plunker的演示。

Answer 5

回答by optimister

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

不仅 .tt-hint 是坏的，其他 css-class 也是。

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.js 和 Bootstrap 3 之间的 css 问题：

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

Answer 6

回答by RockResolve

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?

如果你使用 bootstrap.less，你会更容易。BS 3 安装了 LESS 1.4.1，它现在包括“扩展”优点。请参阅Less 和 Bootstrap：如何使用 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:

扩展现在是 LESS 的杀手级功能。您现在可以完全继承（显式命名）类。因此无需像 Hieu Nguyen 和 Nick P 的 CSS 答案中那样复制属性。LESS 将通过以下方式完成所有工作：

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

The https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.lessless 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:

所述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
}

Answer 7

回答by user

A comprehensive solution (recommended in this bug reportat Typeahead)

一个全面的解决方案（在 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;
}

Answer 8

回答by Gonzalo Muro

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

基于安德烈亚斯的回答，我敢打赌以下内容使用较少：

.tt-hint { 
   .form-control;
}

Answer 9

回答by Pramod Shivale

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');

Answer 10

回答by totas

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）添加到我的表单组元素中。

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

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

提问by Jaime Sangcap

采纳答案by Nick P

回答by Hieu Nguyen

回答by Andreas

回答by Paolo Moretti

回答by optimister

回答by RockResolve

回答by user

回答by Gonzalo Muro

回答by Pramod Shivale

回答by totas

相关推荐

最近更新

标签

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

提问by Jaime Sangcap

采纳答案by Nick P

回答by Hieu Nguyen

回答by Andreas

回答by Paolo Moretti

回答by optimister

回答by RockResolve

回答by user

回答by Gonzalo Muro

回答by Pramod Shivale

回答by totas

相关推荐

jquery - 不是函数错误

jQuery 如何在引导程序中获取单选按钮组值

jQuery WooThemes - Flexslider：flex 视口的高度

jQuery 如何自动更改div内的文本大小？

相关推荐

最近更新

标签