Twitter的typeahead.jsbuild议不是风格（没有边框，透明背景等）

我正在使用twitter的typeahead.js 0.9.3 ，似乎我的build议是不是风格的。

我得到这个：

而不是像这样 （从示例页面 ）

启用JavaScript的types：

$('.search-typeahead').typeahead({ name: 'videos', remote: { url: '/api/v1/internal/videos/typeahead?text=%QUERY' } }); 

HTMLinput元素：

 <input type="text" value="" id="search_keywords" class="no-clear search-typeahead"/> 

补充笔记：

我正在工作的网站有jQuery 1.10.1，不使用twitter引导。 有一堆CSS我没有写，因此我不太了解哪些是我害怕干扰，但是看起来插件添加了自己的样式（没有附带的.css文件），所以理论上它不应该覆盖的东西？ 我很困惑，为什么我的风格工作，但由插件添加的那些，导致透明的背景，没有边界等build议。

Answer 1

所以看看我现在看到的文档 ：

默认情况下，由typeahead.js创build的下拉菜单将看起来很丑，你会想要风格，以确保它符合您的网页的主题。

我的解决scheme是从我想要复制的例子复制样式：

 .tt-query, /* UPDATE: newer versions use tt-input instead of tt-query */ .tt-hint { width: 396px; height: 30px; padding: 8px 12px; font-size: 24px; line-height: 30px; border: 2px solid #ccc; border-radius: 8px; outline: none; } .tt-query { /* UPDATE: newer versions use tt-input instead of tt-query */ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { color: #999; } .tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */ width: 422px; margin-top: 12px; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 8px; box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; } .tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */ color: #fff; background-color: #0097cf; } .tt-suggestion p { margin: 0; } 

Answer 2

所以，下面的风格会给你这种外观和感觉。 它基于从官方Typeahead示例网站提取的CSS。

CSS：

 .tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { color: #999 } .tt-menu { /* used to be tt-dropdown-menu in older versions */ width: 422px; margin-top: 4px; padding: 4px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; line-height: 24px; } .tt-suggestion.tt-cursor,.tt-suggestion:hover { color: #fff; background-color: #0097cf; } .tt-suggestion p { margin: 0; } 

这假设你的input将有form-control类。 对于我的例子，就是这样的：

 <input class="typeahead form-control" type="text" placeholder="States of USA"> 

Answer 3

https://github.com/bassjobsen/typeahead.js-bootstrap-css/blob/master/typeaheadjs.css

其他的看起来不太好，这个看起来最像Bootstrap。

Answer 4

Typeahead已经改变了他们的一些类名，现在上面的例子是不正确的。

例如：

• 而不是.tt-suggestion.tt-is-under-cursor use .tt-suggestion:hover
• .tt-dropdown-menu ，而不是使用.tt-menu

如果你想借用示例页面的样式 ，你可以在这里看到他们的样式表 ：

 .typeahead, .tt-query, .tt-hint { width: 396px; height: 30px; padding: 8px 12px; font-size: 24px; line-height: 30px; border: 2px solid #ccc; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; outline: none; } .typeahead { background-color: #fff; } .typeahead:focus { border: 2px solid #0097cf; } .tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { color: #999 } .tt-menu { width: 422px; margin: 12px 0; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; } .tt-suggestion:hover { cursor: pointer; color: #fff; background-color: #0097cf; } .tt-suggestion.tt-cursor { color: #fff; background-color: #0097cf; } .tt-suggestion p { margin: 0; } 

这里是一个在Stack Snippets中的演示

 var substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substringRegex; // an array that will be populated with substring matches matches = []; // regex used to determine if a string contains the substring `q` substrRegex = new RegExp(q, 'i'); // iterate through the pool of strings and for any string that // contains the substring `q`, add it to the `matches` array $.each(strs, function(i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming' ]; $('.typeahead').typeahead({ hint: true, highlight: true, minLength: 1 }, { name: 'states', source: substringMatcher(states) }); 

 .typeahead, .tt-query, .tt-hint { width: 396px; height: 30px; padding: 8px 12px; font-size: 24px; line-height: 30px; border: 2px solid #ccc; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; outline: none; } .typeahead { background-color: #fff; } .typeahead:focus { border: 2px solid #0097cf; } .tt-query { -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); } .tt-hint { color: #999 } .tt-menu { width: 422px; margin: 12px 0; padding: 8px 0; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2); -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2); box-shadow: 0 5px 10px rgba(0,0,0,.2); } .tt-suggestion { padding: 3px 20px; font-size: 18px; line-height: 24px; } .tt-suggestion:hover { cursor: pointer; color: #fff; background-color: #0097cf; } .tt-suggestion.tt-cursor { color: #fff; background-color: #0097cf; } .tt-suggestion p { margin: 0; } 

 <link href="ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.jquery.js"></script> <div class="container" > <input class="typeahead form-control" type="text" placeholder="States of USA" /> </div> 

Answer 5

这是适合我的代码：

 .twitter-typeahead .tt-query, .twitter-typeahead .tt-hint { margin-bottom: 0; } .tt-hint { display: block; width: 100%; padding: 8px 12px; font-size: 14px; line-height: 1.428571429; color: #999; vertical-align: middle; background-color: #ffffff; border: 1px solid #cccccc; border-radius: 4px; -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); -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } .tt-dropdown-menu { min-width: 160px; margin-top: 2px; padding: 5px 0; 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; } .tt-suggestion { display: block; padding: 3px 20px; } .tt-suggestion.tt-is-under-cursor { color: #fff; background-color: #dfdfdf; } .tt-suggestion.tt-is-under-cursor a { color: #fff; } .tt-suggestion p { margin: 0; } 

Answer 6

由于我有一个较less的环境BS3包括我采取Zugwalt CSS代码（放置在一个更可读的层次结构），并填充样式从BS3的下拉菜单。 这只是跟随你的（自定义的）variables。

  .twitter-typeahead { display: block; width: 100%; //BS 3 needs this to inherit this for children .tt-query, .tt-hint { margin-bottom: 0; } .tt-dropdown-menu { z-index: @zindex-dropdown; min-width: 326px; padding: 5px 0; margin: 2px 0 0; // override default ul font-size: @font-size-base; text-align: left; // Ensures proper alignment if parent has it changed (eg, modal footer) background-color: @dropdown-bg; border: 1px solid @dropdown-fallback-border; // IE8 fallback border: 1px solid @dropdown-border; border-radius: @border-radius-base; .box-shadow(0 6px 12px rgba(0, 0, 0, .175)); background-clip: padding-box; .tt-suggestions { .tt-suggestion { padding: 3px 12px; font-weight: normal; line-height: @line-height-base; color: @dropdown-link-color; white-space: nowrap; // prevent links from randomly breaking onto new lines } .tt-suggestion.tt-cursor { color: @dropdown-link-hover-color; background-color: @dropdown-link-hover-bg; } .tt-suggestion p { margin: 0; } } } } 

Answer 7

这是一个scss版本， scss依赖于引导variables/声明。 不幸的是，你不能在sass中扩展嵌套select器，否则会更小：

 @mixin typeahead-active() { // mimics @extend .dropdown-menu > .active > a; color: $dropdown-link-active-color; text-decoration: none; outline: 0; background-color: $dropdown-link-active-bg; } //https://github.com/corejavascript/typeahead.js/blob/master/doc/jquery_typeahead.md#class-names span.twitter-typeahead { // this is the suggested matches dropdown .tt-menu { @extend .dropdown-menu; } .tt-hint { color: #999 } // Added to suggestion elements. .tt-suggestion { // mimic .dropdown-menu > li > a padding: 3px 20px; line-height: $line-height-base; // Added to suggestion element when menu cursor moves to said suggestion. &.tt-cursor { @include typeahead-active; } // Hover/focus on suggestion &:hover, &:focus { @include typeahead-active; } p { margin: 0; } } .input-group & { display: block !important; .tt-dropdown-menu { top: 32px !important; } } .input-group.input-group-lg & { .tt-dropdown-menu { top: 44px !important; } } .input-group.input-group-sm & { .tt-dropdown-menu { top: 28px !important; } } }