Typeahead.js hint and highlight option not working with prefetch & remote

Question

I followed the instructions here to implement typeahead with a bloodhound: http://twitter.imtqy.com/typeahead.js/examples/#bloodhound

This is my html:

<div id="remote"> <input class="typeahead" type="text" placeholder="Search for cast and directors"> </div> 

This is my js:

 $(document).ready(function() { var castDirectors = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), queryTokenizer: Bloodhound.tokenizers.whitespace, prefetch: '../api/v1/search/people_typeahead', remote: '../api/v1/search/people_typeahead?q=%QUERY', dupDetector: function(remoteMatch, localMatch) { return remoteMatch.value === localMatch.value; } }); castDirectors.initialize(); $('#remote .typeahead').typeahead(null, { name: 'cast-directors', displayKey: 'value', source: castDirectors.ttAdapter(), hint: false, highlight: true, templates: { empty: [ '<div class="empty-message">', 'No matching names', '</div>' ].join('\n'), suggestion: Handlebars.compile('<a id="typeahead" href="{{link}}"><p>{{value}}</p></a>') } }); }); 

however, even with the hint set to false and the highlight set to true, I still see the hint and don't get the highlight in typeahead. What should i change?

Answer 1

Try to put a hint, select and add also minLength: 1 instead of the first zero, it should look like this:

 $('#remote .typeahead').typeahead( { hint: false, highlight: true, minLength: 1 }, { name: 'cast-directors', displayKey: 'value', source: castDirectors.ttAdapter(), templates: { empty: [ '<div class="empty-message">', 'No matching names', '</div>' ].join('\n'), suggestion: Handlebars.compile('<a id="typeahead" href="{{link}}"><p>{{value}}</p></a>') } }); 

Answer 2

Unfortunately, the code for the remote example on the typeahead.js website does not use parameters in the typeahead() function call, and copy / paste will lead you to this problem.

As prsnca has pointed out well , you should definitely add these parameters to the first argument of the function.

No backlight

 $('#remote .typeahead').typeahead(null, { name: 'best-pictures', displayKey: 'value', source: bestPictures.ttAdapter() }); 

Color highlighting

 $('#remote .typeahead').typeahead( { hint: false, highlight: true, minLength: 1 }, { name: 'best-pictures', displayKey: 'value', source: bestPictures.ttAdapter() } );