3

我很难弄清楚如何使用 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}
]

测试.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 是什么，那就太好了 **

4

2 回答 2

6

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 源来了解空格标记器的工作原理：

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

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

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

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

于 2014-10-07T22:35:02.683 回答
1

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

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

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

$('#test .typeahead').typeahead({
    name: 'names',
    display: 'name',
    source: names.ttAdapter()
});
于 2017-07-10T08:29:14.923 回答