Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 856
Ian Lin Avatar asked May 10 '14 23:05

Ian Lin


2 Answers

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>')
    }       
});
like image 131
prsnca Avatar answered Nov 15 '22 23:11

prsnca


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()
  }
);
like image 44
altrugon Avatar answered Nov 15 '22 23:11

altrugon