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
         });

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

诀窍在于您必须注释掉minimumInputLength

这将在您单击select2 ajax时触发它。并为您加载预加载，如以下

，当您进行搜索时，您将获得像这样的远程结果

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

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

1 个答案: