使用 JSON 在 select2 中加载选项时搜索不起作用答案

【问题标题】：Search doesn't work when using JSON to load options in select2使用 JSON 在 select2 中加载选项时搜索不起作用
【发布时间】：2019-10-22 09:58:10
【问题描述】：

我尝试在我的选择输入中使用select2 (v.4.0.10) 并通过 json 文件加载选项。

JSON 文件是这样的：

[{
  "gid": "ADF1C881",
  "name": "COMPANY 1"
}, {
  "gid": "d06C1AEC",
  "name": "COMPANY 2"
}, {
  "gid": "EB72561",
  "name": "COMPANY 3"
}, {
  "gid": "630BCB7",
  "name": "COMPANY 4"
}, {
  "gid": "A18F4D0",
  "name": "COMPANY 5"
}];

HTML 代码：<select class="select2-single-ajax"></select>

我的JS代码是：

$(document).ready(function () {    
    $('.select2-single-ajax').select2({
           minimumInputLength: 2,
           minimumResultsForSearch: 10,
           width: "100%",
           ajax: {
                  url: URL_TO_JSON_FILE,
                  dataType: "json",
                  type: "POST",
                  data: function (term) {
                        return {
                            term: term.name
                        };                        
                   },
                   processResults: function (data) {
                       return {
                            results: $.map(data, function (item) {
                                return {
                                    text: item.name,
                                    id: item.gid
                                };
                            })
                        };
                    }
                }
            });
        });

我在控制台中没有收到任何错误/警告。但是过滤器不起作用，因为它会在用户插入 2 个或更多字符时返回所有结果...

【问题讨论】：

标签： json jquery-select2

【解决方案1】：

确保您的数据提取正确processResults

我使用下面的函数来设置 select2 选项

function LoadPreValueSelect2(url, objControl, caption, param,value) {
    $.ajax({
        url: url,
        type: "GET",
        data: param,
        async: false,
        success: function (data) {
            var option = "";
            $.each(data, function (index, object) {
                option += "<option value='" + object.id + "'>" + object.text + "</option>";
            });
            $(objControl).html(option);

            objControl.select2({
                placeholder: caption
            });
            if (value)
                $(objControl).val(value).trigger("change");
        }
    })

};

【讨论】：