javascript - 带有远程数据源的 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 中将“名称”更改为“值”，它根本不会获取任何项目，而只会输出“未定义”。我很确定这是预取中的过滤器选项无法正常工作。

Answer 1

在过滤器函数中，您正在迭代对象的属性:

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

在这种情况下，您仅迭代“数据”。 要迭代“数据”中的项目，您应该传递 列表.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 }; });
        }
    }
});