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

Posted 2023-05-07

【中文标题】select2 使用查询词过滤本地 JSON 数据结果

【英文标题】：select2 filter local JSON data results with query term

【发布时间】：2015-03-27 15:06:01

【问题描述】：

我正在实施 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

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

【参考方案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

【讨论】：

感谢 John S. 解决方案 #1 有效，#2 返回 - Uncaught TypeError: Cannot read property 'toUpperCase' of undefined @ select2.js 356

@michaelsaxbury - 我为这两种解决方案添加了 jsfiddle 链接。他们不进行 JSON 调用，但如果返回的数据正确，他们会显示两种解决方案都有效。