Javascript 如何将值预加载到Select2控件中并仍搜索远程数据？

当我将值预加载到Select2下拉列表中，并展开控件以键入值。它过滤预加载的值。在文本框中键入内容时，如何配置Select2以进行ajax调用（新搜索）？如果我没有将值预加载到Select2中，ajax调用就会起作用。那我怎么能两者兼得呢

我使用如下内容预加载select2控件：

$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: url,
    data: json,
    dataType: "json",
    success: function (data, textStatus) {
        var json = JSON.parse(data.d);
        var arrData = [];
        if (json !== null && json !== undefined) {
            if (json.length > 0) {
                $.each(json, function (index, element) {
                    var item = { id: element.CommonName, text: element.CommonName, name: element.CommonName };
                    arrData.push(item);
                });
            }
        }
        $("[ID$=ddlDropDown]").select2({
            data: arrData
        });
    }
});

我使用以下命令实例化Select2控件：

$("[ID$=ddlDropDown]").select2({
    ajax: {
        url: url,
        type: "POST",
        dataType: 'json',
        async: true,
        contentType: "application/json; charset=utf-8",
        delay: 500,
        data: function (params) {

                var query = {
                    searchString: (params.term || ""),
                    page: params.page
                }
                // Query paramters will be ?search=[term]&page=[page]
                return JSON.stringify(query);


        },
        processResults: function (data, page) {
            var json = JSON.parse(data.d);
            if (json != null) {
                if (json.length > 0) {
                    return {
                        results: $.map(json, function (item) {
                            return {
                                text: item.CommonName,
                                name: item.CommonName,
                                id: item.CommonName
                            }
                        })
                    };
                } else {
                    return false;
                }
            }
            else {
                return false;
            }

        },
        success: function (data, page) {
            $("[ID$=ddlDropDown]").select2("data", data, true);
        }
    },
    minimumInputLength: 2,
    placeholder: "Select a Value",
    disabled: false,
    cache: true
});

---

由于我遇到了这个问题，并且找不到任何解决方案，所以我想分享一个我已经找到的解决方案。即使这是一个尚未回答的老问题。这将对其他人有所帮助

      $('#select2').select2({
            allowClear: true,
            multiple: false,
      //    minimumInputLength: 3,
            ajax: {
                url: "url",
                dataType: 'json',
                delay: 250,
                type: 'POST',
                data: function (params) {
                    return {
                        q: params.term, // search term
                    };
                },
                processResults: function (data, container) {
                    return {
                        results: $.map(data, function (item) {
                            return {
                                text: item.title + '| <b>' + item.title_2 + '</b>',
                                id:  item.id,
                            }
                        })
                    };
                },
                cache: false
            },
            escapeMarkup: function (markup) {
                return markup;
            },
            placeholder: __('select.project_search'),
        }).live('change', function (e) {
           // on change code
         });

$（'select2'）。选择2({
allowClear:是的，
多重：假，
//最小输入长度：3，
阿贾克斯：{
url:“url”，
数据类型：“json”，
延误：250，
键入：“POST”，
数据：函数（参数）{
返回{
q:params.term，//搜索项
};
},
processResults:函数（数据、容器）{
返回{
结果：$.map（数据、功能（项目）{
返回{
文本：item.title+“|”+item.title_2+”，
id:item.id，
}
})
};
},
缓存：false
},
转义标记：函数（标记）{
返回标记；
},
占位符：uuu（'select.project_search'），
}).live（“更改”，功能（e）{
//关于变更代码
});

在控制器中，您可以检查 如果搜索项为空，则返回预加载选项 否则，运行SQL以搜索数据或返回远程数据

诀窍是你必须注释掉最小长度

无论何时单击select2 ajax，都会触发它。并为您加载预加载，如下所示

当你搜索时，你会得到像这样的远程结果

我希望这将有助于寻找解决方案的人