Bootstrap tokenfield json 有多个字段

Question

当我使用具有多个字段的对象时，Bootstrap 令牌字段出现问题。例如，当我使用 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'
    }]
});

fiddle here 包含一个实例。执行此操作的正确方法是什么？

Answer 1

它不起作用的原因是传递给本地的数据格式不正确。 Typeahead/bloodhound 接受具有字段值和建议的对象数组，其中值是要搜索的字段，建议是原始对象。使用 jQuery map 函数可以转换初始数组（如下图 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 />"
                          })
                       }
                   }
                }]
            });

Bootstrap tokenfield json 有多个字段

Bootstrap tokenfield json with multiple fields

javascript

json

twitter-bootstrap

bloodhound

bootstrap-tokenfield