CODEWITHSUNDEEP
javascriptcssautocompletetypeahead.jstwitter-typeahead
jonboy
jonboy

Reputation: 2749

Twitter Typeahead Highlighting

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.

Upvotes: 2

Views: 966

Answers (2)

acqueron
acqueron

Reputation: 43

It doesn' work for me when I added:

.tt-cursor {
    color: #f1b218;
}

Here is my code:

.tt-cursor {
    color: #f1b218;
}
...
<div id="the-basics" style="position:absolute; top:85px;left:820px;"><input id="nom" style="height:50px;" class="typeahead" type="text"/></div>
...
$('#the-basics .typeahead').typeahead({
    hint: false,
    highlight: true,
    minLength: 1
  },
{
  name: 'states',
  source: substringMatcher(states),
  limit: 10

});

Upvotes: 0

Toby Mellor
Toby Mellor

Reputation: 8205

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;
}

Upvotes: 3

Related Questions