首页 文章

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

提问于
浏览 次
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}
]

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

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 source来查看空白标记生成器的工作方式：

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

    注意它是如何使用正则空格分隔基准空格（\ s，即一次或多次出现的空格） .

    同样，“queryTokenizer”也决定了如何标记搜索词 . 同样，在您的示例中，您使用的是空白标记生成器，因此搜索术语“Bob Marley”将生成基准“Bob”和“Marley” .

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

    回复于
  • 1

    我有一个更简单的选项，你所做的是正确的，除了一个小错误 . 实际上，您可以使用已显示的对象数组 .

    用 display: 'name' 替换 displayKey: 'name' ，它应该工作 .

    因此，完整的预先输出功能将如下所示

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

相关问题