In this article I will explain with an example, how to convert DropDownList to ComboBox using jQuery in ASP.Net.
 
 
jQuery Plugin for Searchable DropDownList
This article makes use of Select2 jQuery Plugin for converting DropDownList to ComboBox using jQuery in ASP.Net.
 
 
HTML Markup
The HTML Markup consists of an ASP.Net DropDownList and a Button. The Button has been assigned with an OnClick event handler.
<asp:DropDownList ID="ddlCustomers" runat="server">
    <asp:ListItem Text="--Select Customer--" Value="0" />
    <asp:ListItem Text="John Hammond" Value="1" />
    <asp:ListItem Text="Mudassar Khan" Value="2" />
    <asp:ListItem Text="Suzanne Mathews" Value="3" />
    <asp:ListItem Text="Robert Schidner" Value="4" />
</asp:DropDownList>
<br />
<br />
<asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClick="Submit" />
 
 

Select2 jQuery Plugin implementation
First, the jQuery and the JS and CSS files of the jQuery Select2 plugin are inherited.
Then inside the jQuery document ready event handler, the jQuery Select2 plugin is applied to the ASP.Net DropDownList.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=ddlCustomers]").select2();
    });
</script>
 
 
Fetching the value of DropDownList on Server Side
When the Submit Button is clicked, the Text and the Value part of the selected DropDownList item are displayed using JavaScript Alert message box.
C#
protected void Submit(object sender, EventArgs e)
{
    string message = "Name: " + ddlCustomers.SelectedItem.Text;
    message += "\\nID: " + ddlCustomers.SelectedItem.Value;
    ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "')", true);
}
 
VB.Net
Protected Sub Submit(ByVal sender As Object, ByVal e As System.EventArgs)
    Dim message As String = "Name: " + ddlCustomers.SelectedItem.Text
    message &= "\nID: " + ddlCustomers.SelectedItem.Value
    ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('" & message & "')", True)
End Sub
 
 
Screenshot
Convert DropDownList to ComboBox using jQuery in ASP.Net
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads