Question

当我使用具有多个字段的Object时，我遇到了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'
    }]
});

小提琴here包含一个实例。这样做的正确方法是什么？

Answer 1

它不起作用的原因是因为传递给本地的数据格式不正确。 Typeahead / bloodhound接受具有字段值和建议的对象数组，其中value是要搜索的字段，而suggestion是原始对象。使用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

1 个答案: