时间戳

首页 > 解决方案 > 使用 JSON 在 select2 中加载选项时搜索不起作用

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

问题描述

我尝试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 个或更多字符时返回所有结果......

标签： jsonjquery-select2

解决方案

确保您正确获取数据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");
        }
    })

};

推荐阅读