如何从 twitter bootstrap 和 Bloodhound 建议中获取 id 和 value？答案

【问题标题】：How to get id and value from twitter bootstrap and bloodhound suggestion?如何从 twitter bootstrap 和 Bloodhound 建议中获取 id 和 value？
【发布时间】：2016-01-25 12:11:05
【问题描述】：

选择建议时如何从 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'}
]

我创建了 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 包含一个只有我选择的文本值的对象

【问题讨论】：

标签： typeahead.js typeahead twitter-typeahead

【解决方案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)。

【讨论】：