如何列出 Typeahead.js 和/或 Bloodhound 引擎的对象？答案

【问题标题】：How do I list objects for Typeahead.js and/or with the Bloodhound engine?如何列出 Typeahead.js 和/或 Bloodhound 引擎的对象？
【发布时间】：2014-10-07 02:36:49
【问题描述】：

我很难弄清楚如何使用 typeahead 以 json 文件作为源来显示对象列表。我的数据都没有显示。

我想列出名称，并在选择时将其他属性用于其他事物。

../data/test.json

[   
    {"name": "John Snow", "id": 1},
    {"name": "Joe Biden", "id": 2},
    {"name": "Bob Marley", "id": 3},
    {"name": "Anne Hathaway", "id": 4},
    {"name": "Jacob deGrom", "id": 5}
]

test.js

$(document).ready(function() {
    var names = new Bloodhound({
        datumTokenizer: Bloodhound.tokenizers.whitespace("name"),
        queryTokenizer: Bloodhound.tokenizers.whitespace,
        prefetch: {
          url: '../data/test.json'
        }
    });
    names.initialize();

    $('#test .typeahead').typeahead({
        name: 'names',
        displayKey: 'name',
        source: names.ttAdapter()
    });
)};

test.html

<div id="test">
    <input class="typeahead" type="text">
</div>

** 如果有人可以向我解释 datumTokenizer 和 queryTokenizer 是什么，那就太好了 **

【问题讨论】：

标签： javascript json typeahead.js prefetch bloodhound

【解决方案1】：

JSON 文件包含 JSON 对象数组，但 Bloodhound 建议引擎需要 JavaScript 对象数组。

因此您需要在预取声明中添加过滤器：

prefetch: {
 url: '../data/test.json',
 filter: function(names) {
   return $.map(names, function(name) { 
    return { name: name };
 });
}

至于“datumTokenizer”，它的目的是确定如何标记数据（即建议值）。正是这些标记随后用于查找与输入查询的匹配项。

例如：

Bloodhound.tokenizers.whitespace("name")

这需要一个数据（在您的情况下是一个名称值）并将其拆分为两个标记，例如“Bob Marley”将分为两个代币，“Bob”和“Marley”。

您可以通过查看typeahead source 来了解空格标记器的工作原理：

function whitespace(str) {
 str = _.toStr(str);
 return str ? str.split(/\s+/) : [];
}

注意它是如何使用正则表达式分割数据的空白（\s+ 即出现一次或多次空白）。

同样，“queryTokenizer”也决定了如何标记搜索词。同样，在您的示例中，您使用的是空格标记器，因此“Bob Marley”的搜索词将导致基准“Bob”和“Marley”。

因此，确定了标记后，如果您要搜索“Marley”，则会找到“Bob Marley”的匹配项。

【讨论】：

感谢您解释标记器，这很有帮助。但是我对您的陈述感到困惑，“JSON 文件包含一个字符串数组，但 Bloodhound 建议引擎需要 JavaScript 对象”。我的 JSON 文件包含对象列表，而不是字符串。
抱歉，它应该包含一个 JSON 对象数组（我已经更新了我的答案）。 Bloodhound 需要 JavaScript 对象，因此调用 $.map() 来生成 JavaScript 对象数组。
啊，现在说得通了。我不知道 JSON 和 Javascript 对象之间的区别。最后，一切都按原样进行！太感谢了！你很有帮助！
@user3228667 很高兴我能帮上忙 :)
我相信filter:在以后的版本中已经变成transform:了。

【解决方案2】：

我有一个更简单的选择，你所做的都是正确的，除了一个小错误。实际上你可以使用如你所展示的对象数组。

将displayKey: 'name' 替换为display: 'name'，它应该可以工作。

所以，完整的预输入功能看起来像

$('#test .typeahead').typeahead({
    name: 'names',
    display: 'name',
    source: names.ttAdapter()
});

【讨论】：