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

Question

我很难弄清楚如何使用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是什么,那就太棒了**

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"将被分成两个标记,"Bob"和"Marley".

您可以通过查看预先输入源来查看空白标记生成器的工作方式:

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

注意它是如何使用正则空格分隔基准空格(\ s +,即一次或多次出现的空格).

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

因此,在确定了令牌后,如果您要搜索"Marley",则会找到"Bob Marley"的匹配.