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

use*_*590 5 typeahead typeahead.js twitter-typeahead

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

我有一个json如下:

[
    {id:1, name:'paul'}, 
    {id:2, name:'jim'}, 
    {id:3, name:'tom'}, 
    {id:4, name:'medor'}, 
    {id:5, name:'janzy'}
]
Run Code Online (Sandbox Code Playgroud)

我创建了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;    
    }
});
Run Code Online (Sandbox Code Playgroud)

我实例化了typeahead如下:

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

我希望能够id在提交表格时获得.当我提交以下示例时,我只获得该name属性.

我试图通过javascript获取id如下:

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

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

whi*_*cer 3

你有几个选择。

我认为重写该identity函数可能会满足您的需要。像这样的事情可能会让你到达那里:

identify: function(datum){
        return { id: datum.id, value: data.name};    
    }
Run Code Online (Sandbox Code Playgroud)

我用于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 {};
            }
        }
    }
Run Code Online (Sandbox Code Playgroud)

您还可以尝试使用该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 {};
            }
        }
    }
Run Code Online (Sandbox Code Playgroud)

该文档(可在此处获取)有些帮助,但没有太多内容来显示更复杂的示例。

在我最终找到答案之前,我还对示例(预先输入示例)进行了相当多的实验。