I am using Twitter Typeahead ( the v0.10.5 typeahead.bundle.js here) and Handlebars v4.0.6.
Everything is working as expected (I'm able to search my dataset and the autocomplete works) apart from the highlighting of words as I type. You can see an example of how this should appear here.
My code is below.
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>')
},
});
I don't think it's a css issue as I removed all of my css and there is still no highlighting.
I have tried the latest version of typeahead (v0.11.1) but this makes no difference.
Any help is appreciated.
It seems a lot of people are having the problem of not specifying the required parameter minLength: x
.
In your case, you've already done this. The problem is that you need to add the following to CSS
.tt-cursor {
color: #f1b218;
}