This is a short article that will explain how to Search and Filter the items of ASP.Net DropDownList control using simple JavaScript. Thus with this article user would be able to search through the DropDownList items Client Side using JavaScript without using any PostBack or AJAX request.

 

HTML Markup

<div>

    <asp:TextBox ID="txtSearch" runat="server"

         onkeyup = "FilterItems(this.value)"></asp:TextBox><br />

    <asp:DropDownList ID="ddlItems" runat="server" >

        <asp:ListItem Text="Mango" Value="1"></asp:ListItem>

        <asp:ListItem Text="Orange" Value="2"></asp:ListItem>

        <asp:ListItem Text="Apple" Value="3"></asp:ListItem>

        <asp:ListItem Text="Banana" Value="4"></asp:ListItem>

        <asp:ListItem Text="Water Melon" Value="5"></asp:ListItem>

        <asp:ListItem Text="Lemon" Value="6"></asp:ListItem>

        <asp:ListItem Text="Pineapple" Value="7"></asp:ListItem>

        <asp:ListItem Text="Papaya" Value="8"></asp:ListItem>

        <asp:ListItem Text="Chickoo" Value="9"></asp:ListItem>

        <asp:ListItem Text="Apricot" Value="10"></asp:ListItem>

        <asp:ListItem Text="Grapes" Value="11"></asp:ListItem>

        <asp:ListItem Text="Olive" Value="12"></asp:ListItem>

        <asp:ListItem Text="Guava" Value="13"></asp:ListItem>

        <asp:ListItem Text="Sweet Lime" Value="14"></asp:ListItem>

    </asp:DropDownList>

    <br />

    <asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>

</div>


Above you’ll notice there are three controls one TextBox, one DropDownList and a Label. Based on the text typed in the TextBox the Items present in the DropDownList will be filtered. While the label will display the status message to the user

 

Filterting the ASP.Net DropDownList Items

<script type = "text/javascript">

    var ddlText, ddlValue, ddl, lblMesg;

    function CacheItems() {

        ddlText = new Array();

        ddlValue = new Array();

        ddl = document.getElementById("<%=ddlItems.ClientID %>");

        lblMesg = document.getElementById("<%=lblMessage.ClientID%>");

        for (var i = 0; i < ddl.options.length; i++) {

            ddlText[ddlText.length] = ddl.options[i].text;

            ddlValue[ddlValue.length] = ddl.options[i].value;

        }

    }

    window.onload = CacheItems;

   

    function FilterItems(value) {

        ddl.options.length = 0;

        for (var i = 0; i < ddlText.length; i++) {

            if (ddlText[i].toLowerCase().indexOf(value) != -1) {

                AddItem(ddlText[i], ddlValue[i]);

            }

        }

        lblMesg.innerHTML = ddl.options.length + " items found.";

        if (ddl.options.length == 0) {

            AddItem("No items found.", "");

        }

    }

   

    function AddItem(text, value) {

        var opt = document.createElement("option");

        opt.text = text;

        opt.value = value;

        ddl.options.add(opt);

    }

</script>

 

The above three JavaScript methods take care of the Filtering and Searching process. The significance of the these methods is described below

 

1. CacheItems

 

This method is called on the window onload event. The job of this method is to populate text and value arrays that will be used to cache the DropDownList items.

 

2. FilterItems

 

This method is called when keyup event fires in the Search TextBox. This method searches for the string segment and filters the DropDownList items.

 

3. AddItem

 

This method as the name suggests adds a new item to the DropDownList


Search and Filter ASP.Net DropDownList's items using JavaScript without using any PostBack or AJAX request or jQuery


Demo


You can try the demo below to experience the working of the Filter



Type text in TextBox to Filter:



 


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.

You can download the sample source code using the link below

FilterDropDownusingJavaScript.zip (3.79 kb)