Question

如何在选择建议时从typeahead.js获取id和值？

我有一个json如下：

[
    {id:1, name:'paul'}, 
    {id:2, name:'jim'}, 
    {id:3, name:'tom'}, 
    {id:4, name:'medor'}, 
    {id:5, name:'janzy'}
]

我按如下方式创建了Bloodhound对象：

var bh = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: '//localhost/data/names.json',
    identify: function(datum){
        return datum.id;    
    }
});

我实例化了typeahead，如下所示：

$('#name').typeahead({"highlight":true}, {
    "name":"name",
    "source":bh,
    "display":"value",
    "limit":10
})

我希望能够在提交表单时获得id。当我提交以下示例时，我只获得name属性。

我试图通过javascript获取id，如下所示：

$('#name').bind('typeahead:select', function(ev, suggestion){
    console.log(suggestion);
})

但是suggestion包含一个只有我选择的文本值的对象

Answer 1

你有几个选择。

我认为覆盖identity功能可以为您提供所需的功能。这样的事情可能会让你在那里：

identify: function(datum){
        return { id: datum.id, value: data.name};    
    }

我使用remote作为我的实际生产代码，并使用filter选项返回显示值以及键值。

它看起来像这样：

remote: {
        url: '/some/url',
        filter: function (data) {
            if (data) {
                return $.map(data, function (object) {
                    return { id: object.id, value: object.name};
                });
            } else {
                return {};
            }
        }
    }

您还可以尝试将transform功能作为prefetch的一部分使用，它看起来像这样：

prefetch: {
        url: '/some/url',
        transform: function (response) {
            if (response) {
                return $.map(response, function (object) {
                    return { id: object.id, value: object.name};
                });
            } else {
                return {};
            }
        }
    }

文档（available here）有些帮助，但对于显示更复杂的示例并没有多大帮助。

在我最终找到答案之前，我还尝试了很多例子（typeahead examples）。

如何从twitter bootstrap和bloodhound建议中获取id和值？

1 个答案: