带有远程数据源的Typeahead.js

Question

我有一个输出的json文件

{"data": ["A", "B", "C", "D", ...]}

我的typeahead.js脚本看起来像

var engine = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: 'list.json',
        filter: function(list) {
            return $.map(list, function(person) { return { name: person }; });
        }
    }
});

engine.initialize();

$('.typeahead').typeahead(null, {
    displayKey: 'name',
    source: engine.ttAdapter()
});

typeahead.js脚本已正确激活，但是它将数据源解释为仅一个逗号分隔的项目，而不是单独的项目。 因此，与其“搜索”元素“ A”，“ B”，“ C”等，不如给我一个建议“ A，B，C，...”。

我的脚本有什么问题？ 我已经在http://twitter.github.io/typeahead.js/examples/中遵循了这些示例。

如果我在datumTokenizer，filter和displayKey中都将“ name”更改为“ value”，则根本不会得到任何项目，而只会输出“ undefined”。 我很确定这是预取中的filter选项无法正常工作。

Answer 1

在过滤器功能中，您正在遍历对象的属性：

{"data": ["A", "B", "C", "D", ...]}

在这种情况下，您仅在“数据”上进行迭代。 要遍历“数据”中的项目，应将list.data传递给过滤器函数。 通过这种方式：

var engine = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: {
        url: 'list.json',
        filter: function(list) {
            return $.map(list.data, function(person) { return { name: person }; });
        }
    }
});