在Bootstrap 3的Twitter Typeahead上的CSS问题

随着Bootstrap 3的发布,Typeahead已经被删除,
twitter/typeahead.html

我已经成功地将它集成在远程数据读取上

但我有自动完成问题

在这里输入图像说明

正如你所看到的那样,文本框上出现了两个文本。

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

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

显示问题的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 3.0 编辑2:Typeahead调用被修改。 看到新的jsfiddle

在玩弄风格之后,它看起来像是表单控制类与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; } 

input小/input大的脚本

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

嗯,它看起来像.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

看一下这个:

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

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

Bootstrap 3 Typeahead

Bootstrap 3 Typeahead

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

这是一个Plunker 演示 。

.tt -hint不仅是brocken,还有其他的css-classes。

在所有浏览器中工作的最佳解决scheme是添加额外的CSS,它修复Typeahead.js和Bootstrap 3之间的css问题:

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

如果你正在使用bootstrap.less,那就更容易了。 BS 3安装了LESS 1.4.1,现在包括“扩展”的好处。 请参阅Less和Bootstrap:如何使用span3(或spanX [任意数量])类作为mixin?

延长现在是LESS的杀手function。 您现在可以完全inheritance(显式命名)类。 所以不需要像Hieu Nguyen和Nick P的CSS答案那样复制属性。 LESS会做到这一切:

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

为BS 3打破了https://github.com/jharding/typeahead.js-bootstrap.css/blob/master/typeahead.js-bootstrap.less更less的代码。我用它作为起点,并且还添加了制作下拉式不是按照BS 2键入的自动换行。 我最后的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 } 

一个全面的解决scheme(在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; } 

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

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

根据安德烈亚斯的答案,我敢打赌,以下使用较less:

 .tt-hint { .form-control; } 

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

从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。

或者使用新的Bloodhoundbuild议引擎使用“旧”(TB 2)插件: https : //github.com/bassjobsen/Bootstrap-3-Typeahead/issues/26

更清洁的less解决scheme

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

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

没有必要去通过任何这些复杂的实现,只需添加

 style="position: relative" 

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