How to implement Dropdown with searchable in Asp.net mvc or Asp.net Core?

4k views Asked by At

enter image description here

Note : Here, before you do anything else add this two files in your project select2.css and select2.min.js. Once you have done to added in your project then implement like this way.

1

There are 1 answers

0
Jaynil Choksi On

Here, I am shown you implement dropdown with searchable using select2.

Add Two files select2.css and select2.min.js

$(document).ready(function () {
    $("#ddlDeviceIDs").select2();
    $("#ddlDeviceIDs").select2("val", "");
 });
 function Combo() {
 $("#ddlDeviceIDs").empty();
        $.ajax({
            type: "Post",
            url: "../.../....",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            acync: false,
            success: function (data)                        
            {
                var items = '<option value="" disabled selected>--Select DeviceID--</option>';
                for (var i = 0; i < data.mdm.length ; i++) {
                    if (parseInt(data.mdm[i].did) == 0) {
                    } else {
                        items += "<option value='" + data.mdm[i].did + "'>" + data.mdm[i].did + "</option>";
                    }
                }
                $("#ddlDeviceIDs").html(items);
                //if (flag == "1") {
                    //$("#ddlDeviceIDs").val(Code).trigger('change.select2');
                //} else {
                //    $("#ddlDeviceIDs").select2("val", "");
               // }
            },
            error: function (response) {
                //alert(response);
            }
    })
}


If you want to Edit time selection than check this one.
   $("#ddlDeviceIDs").val(response.lstlicdtl[0].did).trigger('change.select2');
  
<select class="form-control" tabindex=1 id="ddlDeviceIDs"></select>