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

Question

当我将值预加载到 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
});

Answer 1

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

      $('#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
         });

在你的 Controller 中你可以检查 如果搜索项为空则返回预加载选项 否则运行 SQL 搜索数据或返回远程数据。

the trick is you have to comment out minimumInputLength

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

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

我希望这能帮助寻找解决方案的人