Reputation: 4128
Desperately trying to figure out why autocomplete not working with json objects
(function($){
let $country = $('#country');
let countries = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: '../../data/countries.json'
});
$country.typeahead({
name: 'countries',
hint: true,
highlight: true,
minLength: 1
},{
source: countries,
templates: {
empty: ['No data'].join('\n'),
suggestion: {
function (data) {
return '<ul><li>'+data.name+'</li></ul>';
}
}
}
});
}(jQuery));
Everything working with json like ["item1","item2","Item3"] But not with [{"name":"item1"},{"name":"item2"},{"name":"item3"}]
My json is correct, I even tried to use this one: http://twitter.github.io/typeahead.js/data/nba.json
When using associative array always getting "No data".
Also tried this one:
prefetch: {
url: '../../data/countries.json',
filter: function(list) {
return $.map(list, function(item) {
return {
name: item.name,
code: item.code
};
});
}
}
Data is prefetching, but still no suggestion.
Of course after every edit I cleaning my local storage.
Also tried using Handlebars
name: 'countries',
source: countries,
display: 'name',
templates: {
empty: ['No data'].join('\n'),
suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>')
}
Upvotes: 1
Views: 1037
Reputation: 4128
Ok so I figureout it, still not sure why...
datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.name); }
Instead of
datumTokenizer: Bloodhound.tokenizers.whitespace
So full working code is
(function($){
let $country = $('#country');
let countries = new Bloodhound({
datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.name); },
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: '../../data/countries.json',
filter: function(list) {
return $.map(list, function(item) {
return {
name: item.name,
code: item.code
};
});
},
cache: true
}
});
$country.typeahead({
name: 'countries',
hint: true,
highlight: true,
minLength: 1
},{
source: countries,
display: function(data) { return data.name },
templates: {
empty: ['No data'].join('\n'),
suggestion: function (data) {
return '<ul><li>'+data.name+'</li></ul>';
}
}
});
}(jQuery));
Upvotes: 3