Twitter的突出事先键入的内容

Question

我使用Twitter Typeahead（该v0.10.5 typeahead.bundle.jshere）和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; 
}