typeahead.js pista y resaltar param no funciona con prefetch & remote

Seguí las instrucciones aquí para implementar typeahead con Bloodhound: http://twitter.github.io/typeahead.js/examples/#bloodhound

Este es mi html:

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

Esta es mi 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>') } }); }); 

sin embargo, incluso con la sugerencia configurada en falsa y resaltada en verdadero, sigo viendo sugerencias y no obtengo reflections en el encabezado de mecanografía. ¿Qué debería cambiar?

Intente colocar la sugerencia, resalte y agregue también minLength: 1 en lugar del primer nulo, debería verse así:

 $('#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>') } }); 

Desafortunadamente, el código para el ejemplo remoto en el sitio typeahead.js no usa opciones en la llamada a la function typeahead() y una copy / pegado lo llevará a este problema.

Como fue bien apuntado por prsnca, debes asegurarte de agregar estas opciones en el primer argumento de la function.

Sin destacar

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

Realce

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