javascript - Twitter 预输入突出显示

Question

我正在使用Twitter Typeahead ( v0.10.5 typeahead.bundle.js here )和 Handlebars v4.0.6。

除了我输入的单词突出显示之外，一切都按预期运行(我能够搜索我的数据集并且自动完成功能有效)。您可以查看如何显示的示例 here .

我的代码如下。

var books = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    limit: 10,
    prefetch: {
        url: 'books.json',
        ttl: 0,
        filter: function(list) {
            return $.map(list, function(book) {
                return {
                    title: book.title,
                };
            });
        }
    }
});

$('.demo .typeahead').typeahead({
    hint: false,
    highlight: true, // <-- this doesn't work
    minLength: 1
}, {
    name: 'books',
    displayKey: 'title', 
    source: books.ttAdapter(),
    engine: Handlebars,
    templates: {
        empty: ['<div class="empty-message">', 'no results found', '</div>'].join('\n'),
        suggestion: Handlebars.compile('<p>{{{title}}}</p>') 
    },
});

我不认为这是 CSS 问题，因为我删除了所有 CSS，但仍然没有突出显示。

我已经尝试了最新版本的 typeahead (v0.11.1)，但这没有什么区别。

感谢任何帮助。

Answer 1

似乎很多人都遇到了未指定所需参数minLength: x的问题。

就您而言，您已经完成了此操作。问题是你需要将以下内容添加到CSS

.tt-cursor {
    color: #f1b218;
}