typeahead.js hint and highlight param not working with prefetch & remote

Question

I followed the instruction here to implement typeahead with bloodhound: http://twitter.github.io/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 hint set to false and highlight set to true, I'm still seeing hint and not getting highlights in the typeahead. What should I change?

Answer 1

Try to place the hint, highlight and add also minLength: 1 instead of the first null, 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 site doesn't use options in the call to the typeahead() function and a copy/paste will lead you into this problem.

As it was well pointed by prsnca you have to make sure to add these options in the first argument of the function.

No Highlight

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

Highlight

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