Filter and Search ASPNet DropDownList items using JavaScript

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

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