Select2 Fill Drop down with ajax Web Method不起作用

Question

CSS 用户 select2 版本 Select2-4.0.13 和 bootstrap4

   <link href="Styles/Select2-4.0.13/select2.min.css" rel="stylesheet" type="text/css" />
   <link href="Styles/Select2-4.0.13/select2-bootstrap4.min.css" rel="stylesheet" type="text/css" />

ASPX 使用类 js-data-example-ajax 创建下拉列表名称

<form id="form1" runat="server">
    <asp:DropDownList runat="server" class="js-data-example-ajax" style="width: 300px">
    </asp:DropDownList>
</form>

Java 脚本 使用文档就绪方法中的 ajax Web 方法调用将数据加载到 select2 下拉列表 但它会引发错误并且无法正常工作

    <script src="Scripts/jquery-3.4.1/jquery-3.4.1.min.css" type="text/javascript"></script>
    <script src="Scripts/Select2-4.0.13/select2.full.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.js-data-example-ajax').select2({
                theme: 'bootstrap4',
                minimumInputLength: 1,
                containerCssClass: ':all:',
                allowClear: true,
                ajax: {
                    url: 'WebForm1.aspx/getsource',
                    dataType: 'json',
                    //type: "POST",
                    params: {
                        contentType: 'application/json; charset=utf-8'
                    },
                    data: function (params) {
                        var query = {
                            q: params.term,
                            page: params.page
                        }
                        return query;
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        data = jQuery.map(data.results, function (obj) {
                            obj.id = obj.id;
                            obj.text = obj.text;
                            return obj;
                        });
                        return {
                            results: data,
                            pagination: {
                                more: params.page * 30 < 4//total records
                            }
                        };
                    },
                    success: function (data) {
                        console.log("SUCCESS: ", data);
                    },
                    error: function (data) {
                        console.log("ERROR: ", data);
                    },
                    cache: true
                }
            });
        });
    </script>

.CS 文件 创建方法作为 web 方法，使用 select2 将数据加载到下拉列表

  [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string getsource(string q, int page)
        {
            Select2ModelMain obj = new Select2ModelMain();
            obj.results = new List<SelectResult>();

            SelectResult objdata1 = new SelectResult();
            objdata1.id = 1;
            objdata1.text = "INDIA";
            obj.results.Add(objdata1);

            objdata1 = new SelectResult();
            objdata1.id = 2;
            objdata1.text = "AMERICA";
            obj.results.Add(objdata1);

            objdata1 = new SelectResult();
            objdata1.id = 3;
            objdata1.text = "CHINA";
            obj.results.Add(objdata1);

            objdata1 = new SelectResult();
            objdata1.id = 4;
            objdata1.text = "SRILANKA";
            obj.results.Add(objdata1);

            obj.pagination = new SelectPage();
            obj.pagination.more = "true";

            if (!(string.IsNullOrEmpty(q) || string.IsNullOrWhiteSpace(q)))
            {
                obj.results = obj.results.Where(x => x.text.ToLower().StartsWith(q.ToLower())).ToList();
            }
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            string test = serializer.Serialize(obj);
            return test;
        }

        public class Select2ModelMain
        {
            public List<SelectResult> results { get; set; }
            public SelectPage pagination { get; set; }
        }

        public class SelectResult
        {
            public int id { get; set; }
            public string text { get; set; }
            public string disabled { get; set; }
        }

        public class SelectPage
        {
            public string more { get; set; }
        }

output

Answer 1

第 1 步： 在 Select2ModelMain 上更改

public List<SelectResult> results { get; set; }

to（如果是名称结果，我有一个问题）

public List<SelectResult> items { get; set; }

第 2 步：

试试这个 javascript 作为首字母来检查它是否正常工作。 注意：确保操作方法是 'POST' 而不是 'GET' 我不确定如果 GET for select2 用于正常的 ajax 调用是否有效。

旁注：
当在正常的 ajax 请求上使用 GET 时，这应该设置为 UseHttpGet = true [ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]

For other options when using select2 remote query

$(document).ready(function () {
        $('.js-data-example-ajax').select2({
            ajax: {
                url: 'TestSelect2Page.aspx/getsource',
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                delay: 250,
                data: function (params) {

                    var search = '';

                    if (params.term !== undefined) {
                        search = params.term;
                    }

                    return "{'q': '" + search + "'}";
                },
                processResults: function (data) {
                    var items = JSON.parse(data.d).items

                    if (items == null) {
                        return null;
                    }

                    return {
                        results: items
                    };
                }
            },
            placeholder: 'Search here',
            minimumInputLength: 1
        });
    });

输出 1：

输出 2：

我希望这会有所帮助。编码愉快。

Answer 2

非常感谢它的工作... enter image description here 但我们面临另一个问题

即选定的事件已更改 OnSelectedIndexChanged 不起作用

所以我们添加了另一行“”

在此之后它会触发 OnSelectedIndexChanged 但它不显示选定的项目 2 3

 <asp:Label ID="LblItemName" runat="server" Style="font-weight: bold;" Text="Product Name"></asp:Label>
                                <asp:DropDownList runat="server" ID="txtItemName" data-width="100%" CssClass="select2-single input-sm w-100"
                                    AutoPostBack="true" OnSelectedIndexChanged="txtItemName_SelectedIndexChanged">
                                    <asp:ListItem Selected="True"></asp:ListItem>
                                </asp:DropDownList>