<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Search and Filter a DropDownList</title> <script src="Scripts/jquery-1.3.2.min.js"> type="text/javascript"></script> <script type="text/javascript"> $(function() { var $txt = $('input[id$=txtNew]'); var $ddl = $('select[id$=DDL]'); var $items = $('select[id$=DDL] option'); $txt.keyup(function() { searchDdl($txt.val()); }); function searchDdl(item) { $ddl.empty(); var exp = new RegExp(item, "i"); var arr = $.grep($items, function(n) { return exp.test($(n).text()); }); if (arr.length > 0) { countItemsFound(arr.length); $.each(arr, function() { $ddl.append(this); $ddl.get(0).selectedIndex = 0; } ); } else { countItemsFound(arr.length); $ddl.append("<option>No Items Found</option>"); } } function countItemsFound(num) { $("#para").empty(); if ($txt.val().length) { $("#para").html(num + " items found"); } } }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:textbox id="txtNew" runat="server" xmlns:asp="#unknown"> ToolTip="Enter Text Here"></asp:textbox><br /> <asp:dropdownlist id="DDL" runat="server" xmlns:asp="#unknown"> <asp:listitem text="Apple" value="1"></asp:listitem> <asp:listitem text="Orange" value="2"></asp:listitem> <asp:listitem text="Peache" value="3"></asp:listitem> <asp:listitem text="Banana" value="4"></asp:listitem> <asp:listitem text="Melon" value="5"></asp:listitem> <asp:listitem text="Lemon" value="6"></asp:listitem> <asp:listitem text="Pineapple" value="7"></asp:listitem> <asp:listitem text="Pomegranate" value="8"></asp:listitem> <asp:listitem text="Mulberry" value="9"></asp:listitem> <asp:listitem text="Apricot" value="10"></asp:listitem> <asp:listitem text="Cherry" value="11"></asp:listitem> <asp:listitem text="Blackberry" value="12"></asp:listitem> </asp:dropdownlist> </div> </form> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)