Twitter 的 typehead.js 建议没有样式(没有边框，透明的背景等等)

我使用的是 twitter 的 Js 0.9.3，看起来我的建议没有任何风格。

我明白了:

typeahead bug

而不是这样的: (取自 示例页)

typehead ideal

JavaScript 启用字体输入:

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

HTML 输入元素:

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

附加说明:

我正在开发的网站使用 jQuery 1.10.1，并且不使用 Bootstrap。有一大堆的 CSS 我没有写，因此不熟悉，我担心是干扰，但它似乎增加了自己的插件样式(没有伴随。Css 文件)那么理论上它不应该覆盖一些东西吗？我很困惑为什么我的风格工作，但那些添加的插件不，导致建议与透明的背景，没有边框，等等。

82093 次浏览
小开
最佳答案

因此，看看 医生，我现在看到:

默认情况下，typeeahead.js 创建的下拉菜单将显示 丑陋的，你会希望它的风格，以确保它符合的主题 你的网页。

因此，我的解决方案是从我希望复制的例子中复制样式:

.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;
}
小开

这是对我有效的代码:

.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;
}
小开

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

其他的看起来不怎么样，这个看起来更像 Bootstrap。

小开

因此，下面的样式将给你这样的外观和感觉。它是基于我从官方 Typeahead 示例网站中提取的 CSS。

enter image description here

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

这里假设您的输入将包含 form-control类:

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

由于我有一个较少的环境与 BS3包括我采取 Zugwalt css 代码(把它放在一个更可读的层次结构) ，并填写它的样式从 bs3的下拉菜单。它只是遵循您的(自定义)变量。

    .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 (e.g., 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;
}
}
}
}
小开

Typehead 改变了它们的一些类名，上面的示例现在是不正确的。

例如:

  • 而不是 .tt-suggestion.tt-is-under-cursor 使用 .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;
}

这是一个堆栈片段演示

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="//cdnjs.cloudflare.com/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>

小开

下面是 scss版本，它尽可能依赖于引导变量/声明。遗憾的是，您不能在 sass 中扩展嵌套选择器，否则它将变得更小:

@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;
}
}
}
小开

如果你正在使用 Bootstrap 4，这就足够了:

span.twitter-typeahead
width: 100%


.tt-input
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)


.tt-menu
@extend .list-group
box-shadow: 0 5px 10px rgba(0,0,0,.2)
width: 100%


.tt-suggestion
@extend .list-group-item


.tt-selectable
@extend .list-group-item-action
小开

在我的特殊情况下，绝对定位解决了这个问题。当建议列表(tt-menu)打开时，相对定位正在推下其他引导程序元素。

.tt-menu {
z-index: 2147483647;
position: absolute;
}

您可以将此添加到上述答案 https://stackoverflow.com/a/26934329/1225421中

小开

对我有效的方法是:

.typeahead, .twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; height:auto; }

添加高度: auto; 特别是在“ tt-tip”中。

小开

另一种获得样式的方法是在输入头网站后，选择查看大搜索栏下面的例子，然后为例子在任何建议框中键入一个字母。

从那里，右键点击其中一个建议，显示在搜索栏，并选择“查看页面源”。这将显示所有使用的 HTML、 CSS 和 JS。在您现在看到的 HTML 的顶部，单击到样式表的链接。

<link rel="stylesheet" href="../css/examples.css">

这显示了所有使用的 CSS。

下面这段代码帮了我大忙，但是您可以随意使用其中的大部分代码。

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

https://twitter.github.io/typeahead.js/css/examples.css


提交答案