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

Question

我正在实施 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: function (data, term){
    return { 
        results: data,
        query: term }
    },

但是一旦我点击下拉菜单就会出现这个错误：

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

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

Answer 1

来自Select2 documentation 的data 选项：

适用于数组的内置查询函数的选项 [原文如此]。

如果此元素包含一个数组，则数组中的每个元素必须 包含id 和text 键。

或者，这个元素可以被指定为一个对象，其中 results 键必须以数组形式包含数据，text 键可以 可以是包含文本的数据项中的键的名称，也可以是 从数组中检索给定数据元素的文本的函数。

这意味着您有两个选择：

(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) 为data 选项提供具有results 和text 属性的对象。在这种情况下，您仍然需要提供 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