javascript - 如何使用Bloodhound建议引擎？ (多属性对象在本地传递)

Question

所以我传递了一个如下所示的对象:

[{id: 1, name: 'Project A', type: 'C'}, {id: 2, name: 'Project B', type: 'A'},]

我试图将它传递给 Bloodhound 引擎，如下所示:

    var mySource = new Bloodhound({
    identify: function (obj) { return obj.id; },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    local: datasource
});

由 typeahead.js 使用，如下所示:

$(control)
    .typeahead({
            hint: true,
            highlight: true,
            minLength: 0
        },
        {
            source: mySource
        });

但它根本行不通。我不确定我做错了什么。

我只是希望名字可以被搜索。ID 和类型稍后将传递给 .on('typeahead:autocomplete')。

<小时/>

编辑:控制台中没有错误，并且在 Bloodhound 对象创建之后放置 console.log(mySource); 会生成 Bloodhound 对象:

Answer 1

首先在你的js中设置Bloodhound:

var dataSetBloodhound = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: data
});

其中data是数组中的建议列表。
以我的为例

data = [ { name: "Foo", url: "/bar.jpg" }, etc, etc ]

这就是为什么我在 Bloodhound.tokenizers.obj.whitespace('name') 中使用 name 的原因，因为我希望我的建议成为数据数组中的 name 。

在我的 html 中我有我的输入:

<input id="quick-search-input" type="text" class="form-control" placeholder="Products" data-provide="typeahead"/>
//The important thing here is 'data-provide="typeahead"'

建议框将根据哪个输入采取行动。

然后设置后面的js:

$('#quick-search-input').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
},
{
    name : 'NameForFormInput',
    displayKey: 'name',
    templates:
    {
        suggestion: function(data)
        {
            return '<li class="list-group-item">
                    <p class="predictionText">'+data.name+'</p></li>';
        }
    },
    source : dataSetBloodhound
});

我认为这是你出错的地方，因为我在设置它时遇到了类似的问题，但在实现模板时修复了它。另外，CSS 也会根据您使用的内容而有所不同。