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

来自data选项的Select2 documentation：

适用于数组的内置查询函数的选项[sic]。

如果此元素包含数组，则数组中的每个元素都必须   包含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）为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

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

1 个答案: