Remove From My Forums

webservice for select2

Question
0

Sign in to vote

User-590375999 posted

Hi

i need to implement dropdown infinite loop, but no idea how the asp.net web service looks like for select2 infinite loop, i need to implement search dropdown also.

Friday, May 29, 2020 12:07 PM

Answers

User-939850651 posted

Hi, sivapooja

I modify my code to implement the search feature, and I'm not sure this is what you expect.

More details, please refer below code:

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function getOption() {
            $.ajax({
                url: "DDLService.asmx/getOption",
                type: "POST",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var jsonArr = $.parseJSON(data.d);
                    $.each(jsonArr, function (index, value) {
                        $("#TestSelect").append($('<option/>').val(value.item).text(value.item));
                    })
                },
                error: function () {
                    alert("there is something worng!")
                }
            });
        }
        $(document).ready(function () {
            getOption();
        });
        
        document.addEventListener("keyup", function (e) {
            var textList = [];
            if (e.target.id === "searchBox") {
                //clear select status
                $('#TestSelect').find("option:selected").removeAttr("selected");
                //get options
                $('#TestSelect option').each(function () {
                    textList.push($(this).text());
                });
                for (var i = 0; i < textList.length; i++) {
                    var text = e.target.value; 
                    var lowerText = text.toLowerCase();
                    var lowerOptionText = textList[i].toLowerCase();
                    //you can also change the matching rules
                    var regex = new RegExp("^" + lowerText, "i");
                    var result = regex.test(lowerOptionText);
                    if (result) {
                        $("#TestSelect option[value='" + textList[i] + "']").attr("selected", "selected");
                        return false; 
                    }
                }
            }
        });

        function myFunction() {
            var sh = $("#TestSelect")[0].scrollHeight;
            var ch = $("#TestSelect")[0].clientHeight;
            var st = $("#TestSelect")[0].scrollTop;
            if (ch + st == sh) {
                getOption();
            }
        }
    </script>
</head>
<body>
    <div>
        <input type="search" width="200" id="searchBox"><br />
        <select id="TestSelect" size="5" style='width: 200px;' onscroll="myFunction()">
        </select>
    </div>
</body>

Result:

If there is any other questions, please feel free to let me know.

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, June 4, 2020 8:11 AM

All replies

0

Sign in to vote

User-2054057000 posted

Hi

i need to implement dropdown infinite loop, but no idea how the asp.net web service looks like for select2 infinite loop, i need to implement search dropdown also.

Kindly refer some tutorials on select2 jQuery plugin one such is - How to use Select2 jQuery plugin

Sunday, May 31, 2020 2:58 PM

User-939850651 posted

Hi, sivapooja

According to your description, are you trying to implement infinite loop in dropdownlist, and get data from web service?

I created a demo, you could refer to below code:

DDLService.asmx
  [System.Web.Script.Services.ScriptService]
    public class DDLService : System.Web.Services.WebService
    {
        [WebMethod]
        public String getOption() {
            DataTable dt = new DataTable();
            String conStr = "data source=.; database=TestDB; integrated security=SSPI";
            using (SqlConnection conn = new SqlConnection(conStr)) {
                String query = "select * from Test_tb";
                conn.Open();
                using (SqlCommand cmd = new SqlCommand(query, conn)) {
                    SqlDataAdapter sda = new SqlDataAdapter(cmd);
                    sda.Fill(dt);
                    JavaScriptSerializer serializer = new JavaScriptSerializer();
                    List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
                    Dictionary<string, object> row;
                    foreach (DataRow dr in dt.Rows)
                    {
                        row = new Dictionary<string, object>();
                        foreach (DataColumn col in dt.Columns)
                        {
                            row.Add(col.ColumnName, dr[col]);
                        }
                        rows.Add(row);
                    }
                    return serializer.Serialize(rows);
                }
            }
        }
    }

DDLPage.aspx
    <script src="Scripts/jquery-3.4.1.js"></script>
    <script>
        function getOption() {
            $.ajax({
                url: "DDLService.asmx/getOption",
                type: "POST",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var jsonArr = $.parseJSON(data.d);
                    $.each(jsonArr, function (index, value) {
                        $("#Select1").append($('<option/>').val(value.id).text(value.item));
                    })
                },
                error: function () {
                    alert("there is something worng!")
                }
            });
        }

        $(document).ready(function () {
            getOption();
        });

        function myFunction() {
            var sh = $("#Select1")[0].scrollHeight;
            var ch = $("#Select1")[0].clientHeight;
            var st = $("#Select1")[0].scrollTop;
            if (ch + st == sh) {
                getOption();
                for (var i = 0; i < 5; i++) {
                    $("#Select1")[0].remove(0);
                }
            }
        }
    </script>
</head>
<body>
    <div id="selectDiv">
        <select id="Select1" size="5" multiple="multiple" onscroll="myFunction()">
        </select>
    </div>
</body>

Result:

If I misunderstood your question, please provide more details.

Hope this can help you.

Best regards,

Xudong Peng

Tuesday, June 2, 2020 5:51 AM

0

Sign in to vote

User-590375999 posted

Thank you XuDong,

How to implement the search feature in your code?

Wednesday, June 3, 2020 2:55 AM

User-939850651 posted

Hi, sivapooja

I modify my code to implement the search feature, and I'm not sure this is what you expect.

More details, please refer below code:

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Scripts/jquery-3.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function getOption() {
            $.ajax({
                url: "DDLService.asmx/getOption",
                type: "POST",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    var jsonArr = $.parseJSON(data.d);
                    $.each(jsonArr, function (index, value) {
                        $("#TestSelect").append($('<option/>').val(value.item).text(value.item));
                    })
                },
                error: function () {
                    alert("there is something worng!")
                }
            });
        }
        $(document).ready(function () {
            getOption();
        });
        
        document.addEventListener("keyup", function (e) {
            var textList = [];
            if (e.target.id === "searchBox") {
                //clear select status
                $('#TestSelect').find("option:selected").removeAttr("selected");
                //get options
                $('#TestSelect option').each(function () {
                    textList.push($(this).text());
                });
                for (var i = 0; i < textList.length; i++) {
                    var text = e.target.value; 
                    var lowerText = text.toLowerCase();
                    var lowerOptionText = textList[i].toLowerCase();
                    //you can also change the matching rules
                    var regex = new RegExp("^" + lowerText, "i");
                    var result = regex.test(lowerOptionText);
                    if (result) {
                        $("#TestSelect option[value='" + textList[i] + "']").attr("selected", "selected");
                        return false; 
                    }
                }
            }
        });

        function myFunction() {
            var sh = $("#TestSelect")[0].scrollHeight;
            var ch = $("#TestSelect")[0].clientHeight;
            var st = $("#TestSelect")[0].scrollTop;
            if (ch + st == sh) {
                getOption();
            }
        }
    </script>
</head>
<body>
    <div>
        <input type="search" width="200" id="searchBox"><br />
        <select id="TestSelect" size="5" style='width: 200px;' onscroll="myFunction()">
        </select>
    </div>
</body>

Result:

If there is any other questions, please feel free to let me know.

Best regards,

Xudong Peng

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Thursday, June 4, 2020 8:11 AM

Answered by:

webservice for select2

Question

Answers

All replies