How to get typeahead JS working with my json file
17,458
Solution 1
Your datumTokenizer is not configured correctly. It should look like this.
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country'),
Here is a demo
I know the question is old but I hope this helps.
Solution 2
Another easy-way, it helped me, if your json is like this...
var data = [
{"stateCode": "CA", "stateName": "California"},
{"stateCode": "AZ", "stateName": "Arizona"},
{"stateCode": "NY", "stateName": "New York"},
{"stateCode": "NV", "stateName": "Nevada"},
{"stateCode": "OH", "stateName": "Ohio"}
];
$('#states').typeahead({
name: 'states',
limit: 10,
minLength: 1,
source: function (query, process) {
states = [];
map = {};
$.each(data, function (i, state) {
map[state.stateName] = state;
states.push(state.stateName);
});
process(states);
}
});
Author by
H_C
Updated on June 15, 2022Comments
-
H_C almost 2 years
I would like to make a simple autocomplete with Typeahead JS but i cant make it work. I followed the instructions in the manual but I am not sure what I am doing wrong here. I cant get the right value out of the json file. Its an array with objects, and I just want the country names. Shouldnt be that hard I think. I doesnt display anything. Please help! You can find the typeahead js files at "Getting Started" on the Typeahead Github page.
This is my code:
<head> <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script> <script src="typeahead.jquery.min.js"></script> <script src="bloodhound.min.js"></script> </head> <body> <div id="prefetch"> <input class="typeahead" type="text" placeholder="Countries"> </div> <script> var countries = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.whitespace, queryTokenizer: Bloodhound.tokenizers.whitespace, limit: 4, prefetch: { url: 'countries.json', } }); countries.clearPrefetchCache(); countries.initialize(); $('#prefetch .typeahead').typeahead(null, { name: 'countries', displayKey: 'country', source: countries.ttAdapter(), }); </script> </body>`
Json file (countries.json):
[ { "country": "Holland", "city": "Amsterdam" }, { "country": "Belgium", "city": "Brussel" }, { "country": "Germany", "city": "Berlin" }, { "country": "France", "city": "Paris" } ]
-
Chris Pickford about 8 yearsPlease could you add a link to documentation for the
datumTokenizer
option?