Twitter Typeahead 突出显示答案

【问题标题】：Twitter Typeahead HighlightingTwitter Typeahead 突出显示
【发布时间】：2017-09-25 02:47:27
【问题描述】：

我正在使用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，但仍然没有突出显示。

我已经尝试过最新版本的预输入 (v0.11.1)，但这并没有什么区别。

感谢任何帮助。

【问题讨论】：

看起来您可能需要将 .tt-cursor{ color:#f1b218; } 添加到您的 CSS 中？试一试
@TobyMellor 实际上可行！如此简单，我花了（浪费）这么长时间，谢谢！添加答案;)
没问题！我会发布答案

标签： javascript css autocomplete typeahead.js twitter-typeahead

【解决方案1】：

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

在您的情况下，您已经这样做了。问题是您需要在 CSS 中添加以下内容

.tt-cursor {
    color: #f1b218;
}

【讨论】：