In this article I will explain with an example, how to create Searchable DropDownList in ASP.Net using C# and VB.Net.
This article will illustrate use of ASP.Net AJAX ComboBoxExtender populated from SQL Server Database in ASP.Net with C# and VB.Net.
Database
I have made use of the following table Customers with the schema as follows.
![Create Searchable DropDownList in ASP.Net using C# and VB.Net]()
I have already inserted few records in the table.
![Create Searchable DropDownList in ASP.Net using C# and VB.Net]()
Note: You can download the database table SQL by clicking the download link below.
Using the ASP.Net AJAX Control Toolkit
Registering ASP.Net AJAX Control Toolkit
In order to use ASP.Net AJAX Control Toolkit controls, you will need to add reference of AJAX Control Toolkit Library and then register on the Page as shown below.
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
HTML Markup
The HTML Markup consists of an ASP.Net ScriptManager control, ASP.Net AJAX ComboBox Extender control and a Button.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:ComboBox ID="cbCustomers" runat="server" AutoCompleteMode="SuggestAppend">
</ajaxToolkit:ComboBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="Submit" />
AutoCompleteMode Property of ASP.Net AJAX ComboBox Extender control
The AutoCompleteMode is used to enable AutoComplete mode for the ASP.Net AJAX ComboBox Extender control.
It has the following modes:-
1. Append – In this mode, as user types the suggestion is appended in the TextBox.
Example: As soon as letter M is typed, the whole word Mudassar Khan comes as a suggestion.
![Create Searchable DropDownList in ASP.Net using C# and VB.Net]()
2. Suggest – In this mode, as user types the suggestion is displayed in the DropDown as shown below.
Example: As soon as letter M is typed, the item Mudassar Khan is shown selected in the DropDown.
![Create Searchable DropDownList in ASP.Net using C# and VB.Net]()
3. SuggestAppend – In this mode, as user types the suggestion is appended in the TextBox and also it is displayed in the DropDown.
Example: As soon as letter M is typed, the item Mudassar Khan comes as a suggestion and also it is shown selected in the DropDown.
![Create Searchable DropDownList in ASP.Net using C# and VB.Net]()
4. None – This mode disables the AutoCompleteMode. In this mode, user cannot type in the ASP.Net AJAX ComboBox Extender control.
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
VB.Net
Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient
Binding ASP.Net AJAX ComboBox Extender control from database
Inside the Page Load event of the page, the ASP.Net AJAX ComboBox Extender control is populated with the records from the Customers Table.
The CustomerId and the Name column values are fetched from the database using SqlDataReader and are assigned to the DataTextField and DataValueField properties of the ASP.Net AJAX ComboBox Extender control.
DataTextField – The values of the Column set as DataTextField are visible to the user.
DataValueField – The values of the Column set as DataValueField are not visible to the user. Generally ID or Primary Key columns are set as values in order to uniquely identify the ASP.Net AJAX ComboBox Extender Item.
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name FROM Customers"))
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
cbCustomers.DataSource = cmd.ExecuteReader();
cbCustomers.DataTextField = "Name";
cbCustomers.DataValueField = "CustomerId";
cbCustomers.DataBind();
con.Close();
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(constr)
Using cmd As SqlCommand = New SqlCommand("SELECT CustomerId, Name FROM Customers")
cmd.CommandType = CommandType.Text
cmd.Connection = con
con.Open()
cbCustomers.DataSource = cmd.ExecuteReader()
cbCustomers.DataTextField = "Name"
cbCustomers.DataValueField = "CustomerId"
cbCustomers.DataBind()
con.Close()
End Using
End Using
End If
End Sub
Fetching the Selected Text and Value of the ASP.Net AJAX ComboBox Extender control
Inside the Button Click event handler, the Text and Value of the Selected Item of the ASP.Net AJAX ComboBox Extender control are fetched and are displayed using JavaScript Alert Message Box.
C#
protected void Submit(object sender, EventArgs e)
{
string message = "Selected Text: " + cbCustomers.SelectedItem.Text;
message += "\\nSelected Value: " + cbCustomers.SelectedItem.Value;
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "');", true);
}
VB.Net
Protected Sub Submit(ByVal sender As Object, ByVal e As EventArgs)
Dim message As String = "Selected Text: " & cbCustomers.SelectedItem.Text
message &= "\nSelected Value: " & cbCustomers.SelectedItem.Value
ClientScript.RegisterStartupScript(Me.GetType(), "alert", "alert('" & message & "');", True)
End Sub
Screenshot
![Create Searchable DropDownList in ASP.Net using C# and VB.Net]()
Demo
Downloads
