Bootstrap Tokenfield JSON具有多个字段

Question

当我使用具有多个字段的对象时，我对Bootstrap Tokenfield有一个问题。例如，当我使用JSON对象定义为：

时，我没有任何问题

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

初始化器是：

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

这可以正常工作。但是，如果我添加另一个字段，则在选择令牌时会引发错误Cannot read property 'toString' of undefined。JSON定义为：

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

初始化器是：

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

这里的小提琴包含一个现场示例。做这个正确的方法是什么？

Answer 1

它不起作用的原因是因为传递给本地的数据的格式是不正确的。Typeahead/Bloodhound接受具有字段值和建议的一系列对象，其中值是要搜索的字段，建议是原始对象。使用jQuery地图函数可以转换初始数组(如下所示(。

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

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 />"
                          })
                       }
                   }
                }]
            });