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

Question

我很难弄清楚如何使用以 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()
    });
)};

测试.html

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

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

Answer 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”将拆分为两个 token ，“Bob”和“Marley”。

您可以通过查看 typeahead source 查看空白分词器的工作原理:

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

注意它是如何使用空格的正则表达式(\s+，即一次或多次出现的空格)来分割数据的。

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

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