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
Demo
You can try the demo below to experience the working of the Filter
Type text in TextBox to Filter:
You can download the sample source code using the link below
FilterDropDownusingJavaScript.zip (3.79 kb)