Twitter typeahead has no result when using "prefetch", but works with "remote" JSON

Question

I fight all day. My typeahead search expression works fine with remote json data. But when I try to use the same json data as preloaded data, the sentence is empty. After getting the first character, I get a predefined message "unable to find anything t ..." for an empty result.

Here is my script:

function initialTypeaheadTest(){ var mo_selector = $('*[data-moT="mysearch"]'); var engine = new Bloodhound({ limit: 10 ,prefetch: {url:'/api/action/getjsontest'} //,remote: {url:'/api/action/getjsontest'} ,datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name') ,queryTokenizer: Bloodhound.tokenizers.whitespace }); engine.clearPrefetchCache(); // only for test purposes engine.initialize(); mo_selector.typeahead( { hint: true, highlight: true, minLength: 1 }, { name: 'engine', displayKey: 'name', source: engine.ttAdapter(), templates: { empty: [ '<div class="empty-message">', 'unable to find anything that match the current query', '</div>' ].join('\n'), suggestion: Handlebars.compile([ '<div id="{{value}}"><p style="max-height:100%;"><strong>{{title}}</strong></p>', '<span style="font-size:12px;">{{year}}</span></div>' ].join('')) } }); } 

and thats my json:

 [{ "year":"02 Feb 2013 at 00:40 by anonymous", "title":"JavaScript HTML DOM Changing HTML Content", "value":"1", "tokens":["JavaScript", "HTML", "DOM", "Changing", "HTML", "Content"] },{ "year":"02 Feb 2013 at 00:42 by anonymous", "title":"WDR.de", "value":"2", "tokens":["WDR.de"] },{ "year":"02 Feb 2013 at 00:46 by anonymous", "title":"Nachrichten, aktuelle Schlagzeilen und Videos - n-tv.de", "value":"3", "tokens":["Nachrichten", "aktuelle", "Schlagzeilen", "und", "Videos", "n", "tv.de"] },{ "year":"02 Feb 2013 at 00:55 by anonymous", "title":"JavaScript RegExp Object", "value":"5", "tokens":["JavaScript", "RegExp", "Object"] },{ "year":"15 Feb 2013 at 23:24 by anonymous", "title":"DotnetNuke Module Car Listing Module", "value":"8", "tokens":["DotnetNuke", "Module", "Car", "Listing", "Module"] },{ "year":"08 Feb 2014 at 01:08 by advertiser", "title":"Empfehlung", "value":"1000", "tokens":["Empfehlung"] }] 

source path: mattopen.com/api/action/getjsontest

everything looks good to me. The json data is well formed. All strings (e.g., in tokens) are also quoted in double quotes. Why do deleted data work but no prefetch?

Can someone point me in the right direction? thanks

Answer 1

Everything in your setup is fine except for the tokenizer installed. Since you are returning the json object type in the dataset, you must specify which property / field is in the json object you want tokenize. In your code, you specify name , but your json type does not contain name . If you change it from name to title , everything will work as expected, and then there will be a search in the title field.

Change line:

 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name') 

To:

 datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title') 

This is the field in which you want to use title as an index to search. If you prefer to search for another field / property, then change it to the name of this field / property, which is present in your object type specified in the array.

If you want to use the markers that you provided in your object, you can do this by providing a function that does just that. Replace the datumTokenizer line as follows:

 ,datumTokenizer: function (yourObj) { return yourObj.tokens; // returns the tokens array in your object } 

By the way, by default, Bloodhound.tokenizers.obj.whitespace means that it will try to split the string into spaces. This is why you do not see it above in the latest token implementation, since I assume that there will always be whole lines in the tokens field that you want as they are.

From Documentation Bloodhound

datumTokenizer is a function with a signature (datum) that converts the database into an array of string tokens. Required.

I also added sufficient and set it to 1, this tells the engine that if at least one element is returned (from this in the case of a prefix), then disconnecting to the server is optional.

enough - If the amount of data provided from the internal search index is less than sufficient, the remote will be used to populate requests for requests called by the #search call. The default is 5.

In addition, for testing, you can create a file on disk (call it prefetchData.json ) in the root directory of the site, copy the text of json data directly to this file that you indicated in your question, and then change the url to point to it directly.

 prefetch: {url:'/prefetchData.json'} 

Here is the full working code with the changes mentioned above. Now, if you enter J , you should return 2 results.

 function initialTypeaheadTest(){ var mo_selector = $('*[data-moT="mysearch"]'); var engine = new Bloodhound({ limit: 10 ,sufficient:1 ,prefetch: {url:'/prefetchData.json'} //,remote: {url:'/api/action/getjsontest'} // left it commented out to prove it works ,datumTokenizer: Bloodhound.tokenizers.obj.whitespace('title') ,queryTokenizer: Bloodhound.tokenizers.whitespace }); engine.clearPrefetchCache(); // only for test purposes engine.initialize(); mo_selector.typeahead( { hint: true, highlight: true, minLength: 1 }, { name: 'engine', displayKey: 'name', source: engine.ttAdapter(), templates: { empty: [ '<div class="empty-message">', 'unable to find anything that match the current query', '</div>' ].join('\n'), suggestion: Handlebars.compile([ '<div id="{{value}}"><p style="max-height:100%;"><strong>{{title}}</strong></p>', '<span style="font-size:12px;">{{year}}</span></div>' ].join('')) } }); }