This article will learn how to create a DropDownList in ASP.NET that can be filtered and searched by a specific term. It uses Javascript to manipulate the DropDownList control and show only the desired result.
More like this:
ASP.NET: Insert and Retrieve images using C# and SQL Server Database
Client-Side method to Filter and Search ASP.Net DropDownList items
To get started, create a new ASP.NET application, then add two control to the default page ( or to a page of your choice)
- asp:TextBox
ID: “txtSearch”
MaxLength: “20”
runat: “server”
- asp:DropDownList
ID: “ddlStates”
runat: “server”
<div>
<asp:TextBox ID="txtSearch" MaxLength="20" runat="server" onkeyup="FilterDropDownList(this.value)" /><br />
<hr />
<label>State</label>
<asp:DropDownList ID="ddlStates" runat="server">
<asp:ListItem Value="AL">Alabama</asp:ListItem>
<asp:ListItem Value="AK">Alaska</asp:ListItem>
<asp:ListItem Value="AZ">Arizona</asp:ListItem>
<asp:ListItem Value="AR">Arkansas</asp:ListItem>
<asp:ListItem Value="CA">California</asp:ListItem>
<asp:ListItem Value="CO">Colorado</asp:ListItem>
<asp:ListItem Value="CT">Connecticut</asp:ListItem>
<asp:ListItem Value="DE">Delaware</asp:ListItem>
<asp:ListItem Value="FL">Florida</asp:ListItem>
<asp:ListItem Value="GA">Georgia</asp:ListItem>
<asp:ListItem Value="HI">Hawaii</asp:ListItem>
<asp:ListItem Value="ID">Idaho</asp:ListItem>
<asp:ListItem Value="IL">Illinois</asp:ListItem>
<asp:ListItem Value="IN">Indiana</asp:ListItem>
<asp:ListItem Value="IA">Iowa</asp:ListItem>
<asp:ListItem Value="KS">Kansas</asp:ListItem>
<asp:ListItem Value="KY">Kentucky</asp:ListItem>
<asp:ListItem Value="LA">Louisiana</asp:ListItem>
<asp:ListItem Value="ME">Maine</asp:ListItem>
<asp:ListItem Value="MD">Maryland</asp:ListItem>
<asp:ListItem Value="MA">Massachusetts</asp:ListItem>
<asp:ListItem Value="MI">Michigan</asp:ListItem>
<asp:ListItem Value="MN">Minnesota</asp:ListItem>
<asp:ListItem Value="MS">Mississippi</asp:ListItem>
<asp:ListItem Value="MO">Missouri</asp:ListItem>
<asp:ListItem Value="MT">Montana</asp:ListItem>
<asp:ListItem Value="NE">Nebraska</asp:ListItem>
<asp:ListItem Value="NV">Nevada</asp:ListItem>
<asp:ListItem Value="NH">New Hampshire</asp:ListItem>
<asp:ListItem Value="NJ">New Jersey</asp:ListItem>
<asp:ListItem Value="NM">New Mexico</asp:ListItem>
<asp:ListItem Value="NY">New York</asp:ListItem>
<asp:ListItem Value="NC">North Carolina</asp:ListItem>
<asp:ListItem Value="ND">North Dakota</asp:ListItem>
<asp:ListItem Value="OH">Ohio</asp:ListItem>
<asp:ListItem Value="OK">Oklahoma</asp:ListItem>
<asp:ListItem Value="OR">Oregon</asp:ListItem>
<asp:ListItem Value="PA">Pennsylvania</asp:ListItem>
<asp:ListItem Value="RI">Rhode Island</asp:ListItem>
<asp:ListItem Value="SC">South Carolina</asp:ListItem>
<asp:ListItem Value="SD">South Dakota</asp:ListItem>
<asp:ListItem Value="TN">Tennessee</asp:ListItem>
<asp:ListItem Value="TX">Texas</asp:ListItem>
<asp:ListItem Value="UT">Utah</asp:ListItem>
<asp:ListItem Value="VT">Vermont</asp:ListItem>
<asp:ListItem Value="VA">Virginia</asp:ListItem>
<asp:ListItem Value="WA">Washington</asp:ListItem>
<asp:ListItem Value="WV">West Virginia</asp:ListItem>
<asp:ListItem Value="WI">Wisconsin</asp:ListItem>
<asp:ListItem Value="WY">Wyoming</asp:ListItem>
</asp:DropDownList>
</div>
How will the search function work?
Below are the steps that are involved in the search functionality of the DropDownList:
- Copy all the items from the DropDownList into two arrays, display, and value
- Clear all items in the DropDownList
- Add items from the arrays to the DropDownList based on the search criteria in the TextBox.
var display, value, ddlStates;
window.onload = function () {
CopyToArrays();
};
function CopyToArrays() {
display = new Array();
value = new Array();
ddlStates = document.getElementById("<%=ddlStates.ClientID %>");
for (var i = 0; i < ddlStates.options.length; i++) {
display[display.length] = ddlStates.options[i].text;
value[value.length] = ddlStates.options[i].value;
}
}
function FilterDropDownList(val) {
ddlStates.options.length = 0;
var newOption = document.createElement("option");
for (var i = 0; i < display.length; i++)
if (display[i].toLowerCase().indexOf(val) != -1) {
newOption.text = display[i];
newOption.value = value[i];
ddlStates.options.add(newOption);
}
}
Result