Javascript 带多个字段的引导标记字段json

当我使用具有多个字段的对象时，引导标记字段有问题。例如，当我使用json对象定义为：

local: [ { value: 'red' }, { value: 'orange' }} ]

local: [ { id: 1, value: 'red' }, { id: 2, value: 'orange' }} ]

此项的初始值设定项为：

$('#tokenfield-input').tokenfield({
    typeahead: [null, { source: engine.ttAdapter(),
    displayKey: 'value',
    displayValue: 'value'
    }]
});

$('#tokenfield-input').tokenfield({
    typeahead: [null, { source: engine.ttAdapter(),
    displayKey: 'value',
    displayValue: 'id'
    }]
});

这是正确的。 但是，如果我添加另一个字段，当选择令牌时，它会抛出一个错误

无法读取未定义的属性“toString”。json的定义如下：

local: [ { value: 'red' }, { value: 'orange' }} ]

local: [ { id: 1, value: 'red' }, { id: 2, value: 'orange' }} ]

此项的初始值设定项为：

$('#tokenfield-input').tokenfield({
    typeahead: [null, { source: engine.ttAdapter(),
    displayKey: 'value',
    displayValue: 'value'
    }]
});

$('#tokenfield-input').tokenfield({
    typeahead: [null, { source: engine.ttAdapter(),
    displayKey: 'value',
    displayValue: 'id'
    }]
});

小提琴中有一个活生生的例子。正确的方法是什么？
它不工作的原因是传递到本地的数据格式不正确。Typeahead/bloodhound接受一个包含字段value和suggestion的对象数组，其中value是要搜索的字段，suggestion是原始对象。使用jQuery映射函数可以转换初始数组（如下面的local部分所示）

要正确加载建议，需要覆盖建议模板

var one =  [
   { id: 1, name: 'red' },
   { id: 2, name: 'orange' },
   { id: 3, name: 'yellow' },
   { id: 4, name: 'green' },
   { id: 5, name: 'blue' },
   { id: 6, name: 'indigo' },
   { id: 7, name: 'violet' },
   { id: 8, name: 'black' },
   { id: 9, name: 'white' },
   { id: 10, name: 'brown' },
   { id: 11, name: 'pink' }
   ];

   $(document).ready(function () {
            var engine = new Bloodhound({
            local: $.map(one, function(d) {
               return {value: d.name, suggestion: d}
               }),
                datumTokenizer: function (d) {
                    return Bloodhound.tokenizers.whitespace(d.value);
                },
                queryTokenizer: Bloodhound.tokenizers.whitespace
            });

            engine.initialize();

            // Action item 1
            $('#mytokenfield').tokenfield({
                typeahead: [null, {
                    source: engine.ttAdapter(),
                    displayKey: 'value',
                    templates: {
                       suggestion: function (data) {
                          return $("<div />", {
                          "html": "<br />" + "<span>" +
                          data.suggestion.ID + " " + data.suggestion.Name + "</span><br />"
                          })
                       }
                   }
                }]
            });      

var one=[
{id:1，名称：'red'}，
{id:2，名称：'orange'}，
{id:3，名称：'yellow'}，
{id:4，名称：'green'}，
{id:5，名称：'blue'}，
{id:6，名称：'indigo'}，
{id:7，名字：'violet'}，
{id:8，名称：'black'}，
{id:9，名字：'white'}，
{id:10，名字：'brown'}，
{id:11，名称：'pink'}
];
$（文档）.ready（函数（）{
var引擎=新警犬({
本地：$.map（一个，函数（d）{
返回{value:d.name，建议：d}
}),
datumTokenizer:函数（d）{
return Bloodhound.tokenizers.whitespace（d.value）；
},
queryTokenizer:猎犬。标记。空白
});
engine.initialize（）；
//行动项目1
$（“#mytokenfield”）.tokenfield({
typeahead:[null{
来源：engine.ttAdapter（），
displayKey:'值'，
模板：{
建议：功能（数据）{
返回$（“”）{
“html”：“
”+“”+
data.suggestion.ID+“”+data.suggestion.Name+“
”
})
}
}
}]
});