In this article I will explain with an example, how to filter and search DropDownList Items using JavaScript in ASP.Net.
 
 

HTML Markup

The HTML Markup consists of following controls:
TextBox – For capturing text to be searched in DropDownList.
The TextBox has been assigned with an onkeyup event handler.
DropDownList – For displaying Fruits name.
Label – For displaying count of related Items.
<asp:TextBox ID="txtSearch" runat="server" onkeyup="FilterItems(this.value)"></asp:TextBox>
<br />
<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 />
<br />
<asp:Label ID="lblMessage" runat="server" Text=""></asp:Label>
 
 

JavaScript for filtering DropDownList Items

The below three JavaScript methods take care of the Filtering and Searching process.
Inside window.onload event handler, the JavaScript CacheItems gets called.

CacheItems

Inside this function, two Arrays are created for Text and Value and the DropDownList and Label controls are referenced.
A FOR loop is executed over the DropDownList Items and Text and Value of each ListItems are stored inside their respective Arrays.
 

FilterItems

When user inputs a value in the TextBox the FilterItems JavaScript function gets called.
Inside this function, a FOR loop is executed over each DropDownList Item and a check is performed whether the text entered in the TextBox is present in the DropDownList item or not.
If found related text then, the count of items where it is matched is set the Label control.
 

AddItem

This function gets called inside the FilterItems JavaScript function.
It simply adds another option in DropDownList as No item found.
<script type="text/javascript">
    window.onload = CacheItems;
    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;
        }
    }
 
    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 + " item(s) found.";
        if (ddl.options.length == 0) {
            AddItem("No item found.", "");
        }
    }
 
    function AddItem(text, value) {
        var opt = document.createElement("option");
        opt.text = text;
        opt.value = value;
        ddl.options.add(opt);
    }
</script>
 
 

Screenshot

Filter and Search ASP.Net DropDownList items using JavaScript
 
 

Demo

View Demo
 
 

Downloads

FilterDropDownusingJavaScript.zip