dropdown list with auto complete or searchable or filtering using JQuery with ASP.Net

Description:-

In this example we explain that how to create dropdown list with autocomplete facility or search facility or filtering facility with DropDownList in asp.net. Previous we already explain that autocomplete facility with textbox but in this we explain that autocomplete with Dropdownlist in asp.net.

Suppose you have a large amount of value or country that you want to bind in dropdown list. But problem is that when user selectscountry then user has to manually find country in DropDownList by scrolling the DropDownList when there is a thousand of value is binded to DropDownList.

So avoid this problem and you want to make that DropDownList user-friendly. You use auto search functionality in ASP.Net Dropdownlist control.

to do this functionality in DropDownList first You have to take one textbox inside dropdown list and when user type something in that textbox dropdown list become filter or searchable and it will display only those records that are matched within textbox value without doing any Postback.

also you can download file from below links
Download files

Default.aspx:-

 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <htmlxmlns="http://www.w3.org/1999/xhtml">  
 <headrunat="server">  
 <title></title>  
 <styletype="text/css">  
 aimg{border: none;}  
 olli {list-style: decimaloutside;}  
 div#container {width: 780px;margin: 0auto;padding: 1em0; }  
 div.side-by-side {width: 100%;margin-bottom: 1em; }  
 div.side-by-side>div {float: left;width: 50%; }  
 div.side-by-side>div>em {margin-bottom: 10px;display: block; }  
 .clearfix:after  
     {  
 content: "\0020";  
 display: block;  
 height: 0;  
 clear: both;  
 overflow: hidden;  
 visibility: hidden;  
     }  
 </style>  
 <linkrel="stylesheet"href="chosen.css"/>  
 </head>  
 <body>  
 <formid="form1"runat="server">  
 <div>   
 <divid="container">  
 <h2>Selected Value :  
 <asp:Labelrunat="server"ID="lblselectedcountry"Style="color: red"></asp:Label></h2>  
 <divclass="side-by-side clearfix">  
 <div>  
 <asp:DropDownListdata-placeholder="Choose a Country..."runat="server"ID="ddlcountry"  
 class="chzn-select"Style="width: 350px;">  
 <asp:ListItemText=""Value=""></asp:ListItem>  
 <asp:ListItemText="India"Value="India"></asp:ListItem>  
 <asp:ListItemText="United Kingdom"Value="United Kingdom"></asp:ListItem>  
 <asp:ListItemText="Pakistan"Value="Pakistan"></asp:ListItem>  
 <asp:ListItemText="Algeria"Value="Algeria"></asp:ListItem>  
 <asp:ListItemText="Angola"Value="Angola"></asp:ListItem>  
 <asp:ListItemText="china"Value="china">Bahamas</asp:ListItem>  
 <asp:ListItemText="chicago"Value="chicago"></asp:ListItem>  
 <asp:ListItemText="Czech Republic"Value="Czech Republic"></asp:ListItem>  
 <asp:ListItemText="Denmark"Value="Denmark"></asp:ListItem>  
 <asp:ListItemText="Djibouti"Value="Djibouti"></asp:ListItem>  
 <asp:ListItemText="Dominica"Value="Dominica"></asp:ListItem>  
 <asp:ListItemText="Dominican Republic"Value="Dominican Republic"></asp:ListItem>  
 </asp:DropDownList>  
 <asp:Buttonrunat="server"ID="btnsubmit"Text="Get Selected"OnClick="btnsubmit_Click"/>  
 </div>  
 </div>  
 </div>  
 </div>  
 <scriptsrc="jquery.min.js"type="text/javascript"></script>  
 <scriptsrc="chosen.jquery.js"type="text/javascript"></script>  
 <scripttype="text/javascript">    $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({ allow_single_deselect: true });</script>  
 </form>  
 </body>  
 </html>

Default.aspx.cs

 using System;  
 usingSystem.Collections.Generic;  
 usingSystem.Linq;  
 using System.Web;  
 usingSystem.Web.UI;  
 usingSystem.Web.UI.WebControls;  
   
 protectedvoidbtnsubmit_Click(object sender, EventArgs e)  
 {   lblselectedcountry.Text = ddlcountry.SelectedValue; }