Typeahead Bloodhound 自动完成功能无法与 json 对象一起使用

Question

拼命想弄清楚为什么自动完成不能与 json 对象一起工作

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

所有使用 json 的东西，比如 ["item1","item2","Item3"] 但不是 [{"name":"item1"},{"name":"item2"},{"name":"item3"}]

我的json是正确的，我什至试过用这个：http://twitter.github.io/typeahead.js/data/nba.json

使用关联数组时总是得到“无数据”。

也试过这个：

prefetch: {
            url: '../../data/countries.json',
            filter: function(list) {
                return $.map(list, function(item) {
                    return {
                        name: item.name,
                        code: item.code
                    };
                });
            }
        }

数据正在预取，但仍然没有建议。

当然，每次编辑后我都会清理本地存储。

也尝试使用 Handlebars

name: 'countries',
        source: countries,
        display: 'name',
        templates: {
            empty: ['No data'].join('\n'),
            suggestion: Handlebars.compile('<p><strong>{{name}}</strong></p>')
        }

Answer 1

好吧，我想通了，仍然不知道为什么......

datumTokenizer: function (d) { return Bloodhound.tokenizers.whitespace(d.name); }

代替

datumTokenizer: Bloodhound.tokenizers.whitespace

所以完整的工作代码是

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