json - select2使用查询词过滤本地JSON数据结果

我正在实现select2版本3.5.0。我在文档准备功能中使用以下jQuery:

jQuery.getJSON('/rest/call/to/retrieve/JSON').done(
  function( data ) {
     jQuery('#byProductName').select2({
         placeholder: 'Type any portion of a single product name...',
         allowClear: true,
         minimumInputLength: 0,
         multiple: true,
         id: function(data){ return data.product; },
         data: data,
         formatResult: function(data){ return data.product; },
         formatSelection: function(data){ return data.product; },
     });
  }
);

HTML隐藏的输入元素:

<div id='freeForm'>
    <input name='Search Products' type='hidden' id='byProductName'>
</div>

JSON结果:

[{"product":""},{"product":" windows"},{"product":" mac"},
 {"product":" linux"},{"product":" RHEL"},{"product":"Test product list"}]

下拉列表正确填充了我的值，我可以选择多个项目并成功删除它们。但是，当我在输入字段中键入字符串以过滤结果集时，它不会过滤。

我尝试将data:更改为以下内容:

data: function (data, term){
    return {
        results: data,
        query: term }
    },

但是一旦单击下拉列表，就会出现此错误:

Uncaught TypeError: Cannot read property 'length' of undefined - select2 line 1784

如何使用查询词成功过滤结果列表？

最佳答案

从Select2 documentation中获得data选项:



这意味着您有两个选择:

(1)在将data数组赋予id之前，将其更改为具有text和.select2()属性的对象的数组。然后，您可以摆脱id，formatResult和formatSelection选项。

jQuery.getJSON('/rest/call/to/retrieve/JSON').done(
    function( data ) {

        data = $.map(data, function(item) {
            return { id: item.product, text: item.product };
        });

        jQuery('#byProductName').select2({
            placeholder: 'Type any portion of a single product name...',
            allowClear: true,
            minimumInputLength: 0,
            multiple: true,
            data: data
        });
    }
);

jsfiddle

(2)为results选项提供具有text和data属性的对象。在这种情况下，您仍然需要提供id选项，但是您可以摆脱formatResult和formatSelection选项。

jQuery.getJSON('/rest/call/to/retrieve/JSON').done(
    function( data ) {
        jQuery('#byProductName').select2({
            placeholder: 'Type any portion of a single product name...',
            allowClear: true,
            minimumInputLength: 0,
            multiple: true,
            data: { results: data, text: 'product' },
            id: function(item) { return item.product; }
        });
    }
);

jsfiddle