Question

我在我的项目中使用twitter typeahead。

如this example所示当我将鼠标移到下拉列表中的建议列表时，我需要我的建议列表项具有不同的背景颜色。下拉列表中列出的选项甚至看起来不像超链接（当鼠标移动到下拉列表中的建议列表时，不显示手形图标）。

据我所知，我不需要自定义模板来实现此功能。它内置于twitter typeahead。如果我想自定义模板超出可用的基本功能，自定义模板会派上用场。

这是我的代码。

`<script type="text/javascript">
var users = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
queryTokenizer: Bloodhound.tokenizers.whitespace, 
limit: 10,
remote: '/some/remoteurl?name=%QUERY'
});
users.initialize();
$('input.typeahead').typeahead({
highlight: true,
}, {
name: 'users',
displayKey: 'name',
source: users.ttAdapter()
});
</script>`

HTML如下。

`<style type="text/css">
.typeahead, .tt-query, .tt-hint {
    border: 2px solid #CCCCCC;
    border-radius: 8px;
    font-size: 16px;
    font-family:sans-serif;
    height: 30px;
    line-height: 16px;
    outline: medium none;
    padding: 3px 20px;
    width: 180px;
}
.typeahead {
    background-color: #FFFFFF;
}
.typeahead:focus {
    border: 2px solid #0097CF;
}
.tt-query {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.tt-hint {
    color: #999999;
}
.tt-dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    margin-top: 12px;
    padding: 4px 0;
    width: 180px;
}
.tt-suggestion {
    font-size: 16px;
    font-family:sans-serif;
    text-align: left;
    line-height: 16px;
    padding: 3px 20px;
    width: 180px;
}
.tt-suggestion.tt-is-under-cursor {
    background-color: #0097CF;
    color: #FFFFFF;
}
.tt-suggestion p {
    margin: 0;
}

</style>`

最后，这是我对typeahead的formcontrol。

`<div class='container-fluid' id="searchUsersDiv">
<input type="text" placeholder="First or Last Name" class="typeahead 
tt-query" ></div>`

请让我知道我错过了什么。

Answer 1

当您悬停元素时会添加类.tt-is-under-cursor，因此您需要在css中添加以下内容：

.tt-suggestion.tt-is-under-cursor{
    background-color: blue;
}

Answer 2

也许该课程没有被命名 tt-is-under-cursor ......

关注this后，它已重命名为 tt-cursor

当最终用户在.tt-suggestion上按m键或按键时，该类 tt-cursor将被添加到它。您可以将此类用作钩子造型＆＃34;光标下＃34;建议状态。

在鼠标悬停状态下从自动生成的下拉列表中更改列表项的背景颜色

2 个答案: