Typeahead Bloodhound autocomplete cant work with json objects

Question

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>')
        }

Answer 1

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));