ASP.Net: Filter a DropDownList items using JavaScript

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:

  1. Copy all the items from the DropDownList into two arrays, display, and value
  2. Clear all items in the DropDownList
  3. Add items from the arrays to the DropDownList based on the search criteria in the TextBox.
All of the above will be implemented using JavaScript.

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

Leave a Reply

Your email address will not be published. Required fields are marked *