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

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

1 个答案: