带有远程数据源的 Typeahead.js答案

【问题标题】：Typeahead.js with remote data source带有远程数据源的 Typeahead.js
【发布时间】：2014-08-23 22:23:04
【问题描述】：

我有一个输出的 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”。我很确定这是 prefetch 中的过滤器选项无法正常工作。

【问题讨论】：

This 答案，给出了一个远程示例，可能对您有所帮助。

标签： javascript jquery typeahead.js typeahead twitter-typeahead

【解决方案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 }; });
        }
    }
});

【讨论】：