0

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

这里的小提琴包含一个活生生的例子。这样做的正确方法是什么？

4

1 回答 1

0

它不起作用的原因是传递给本地的数据格式不正确。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 />"
                          })
                       }
                   }
                }]
            });
于 2017-06-21T17:36:47.880 回答