List Search using jQuery
Here in this example we are using jQuery to filter the list of products. We have list of products in UL and LI. We have associated the “KeyUp” event on the top search textbox. So when somebody type in the textbox we filter the list on the basis of entered value.
We are using the RegExp for comparing the string for matching characters. First we created the regular expression “rg” from the given text and compare the product name (string) with the help of search function.
The search function return the position of string where match is found or ‘-1′ in case of no match.
So, we selected all the LI’s exist inside the ‘product_list‘ ID and match each product name one by one. We hide the LI if its text not match the current search text and display the LIs with matching text.
HTML Code: -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sales Vu</title> <link rel="stylesheet" href="pm-common-new.css" type="text/css" /> <!--[if IE]><link rel="stylesheet" href="ie.css" type="text/css" media="screen, projection"><![endif]--> </head> <body style="padding-left:20px;"> <div class="top-bar"> <div class="top-left-corner"><img src="images/top-left-corner.png" /></div> <div class="top-mid-bg">Product Management</div> <div class="top-right-corner"><img src="images/top-right-corner.png" /></div> </div> <div class="body-part"> <div class="body-part-top"> <div class="search-container"> <div class="search-box" style="float:left; width:257px;"> <div style="float: left; width: 70px; padding-top: 4px; font-weight: bold;">Search </div> <div class="text-field-box"> <input name="" type="text" id="search" autocomplete="off" class="search-box-bg" /> </div> <div class="text-field-cancel-button"> <a href="javascript:void(0);" id="search_clear" ><img src="images/search-box-cancel.png" border="0" id="search_clear" /></a> </div> </div> </div> <div class="modifier-product"> <div class="modifier-product-right" style="float:left;"> <div class="modifier-product-right-top"> Product </div> <div class="modifier-product-right-mid"> <div class="modifier-product-right-detail" id="product_list"> <div class="modifier-product-right-detail-heading"> <div class="product-list-heading">Product</div> <div class="price-list-heading">Price ($)</div> </div> <div class="product-list"> <ul> <li> <div class="product">Banana Split</div> <div class="price">3.00</div> </li> <li> <div class="product">Bird Lite</div> <div class="price">2.45</div> </li> <li> <div class="product">Butter</div> <div class="price">2.00</div> </li> <li> <div class="product">Chicken With Coke</div> <div class="price">3.45</div> </li> <li> <div class="product">Chips With Coke</div> <div class="price">3.75</div> </li> <li> <div class="product">Corono Lite</div> <div class="price">2.00</div> </li> <li> <div class="product">Eggs</div> <div class="price">0.50</div> </li> <li> <div class="product">Limca</div> <div class="price">1.05</div> </li> <li> <div class="product">Sprite</div> <div class="price">1.20</div> </li> <li> <div class="product">test product</div> <div class="price">3.00</div> </li> </ul> </div> </div> </div> <div class="modifier-product-right-bottom"> </div> </div> </div> </div> <div class="body-part-bottom"> <img src="images/body-bottom.png" /> </div> </div> </body> </html> <script src="jquery.js" type="text/javascript"></script> <script src="pm_new.js" type="text/javascript"></script>
JavaScript Code: -
// JavaScript Document $(document).ready(function () { $('#search').keyup(function(event) { var search_text = $('#search').val(); var rg = new RegExp(search_text,'i'); $('#product_list .product-list .product').each(function(){ if($.trim($(this).html()).search(rg) == -1) { $(this).parent().css('display', 'none'); $(this).css('display', 'none'); $(this).next().css('display', 'none'); $(this).next().next().css('display', 'none'); } else { $(this).parent().css('display', ''); $(this).css('display', ''); $(this).next().css('display', ''); $(this).next().next().css('display', ''); } }); }); }); $('#search_clear').click(function() { $('#search').val(''); $('#product_list .product-list .product').each(function(){ $(this).parent().css('display', ''); $(this).css('display', ''); $(this).next().css('display', ''); $(this).next().next().css('display', ''); }); });
#1 by Sachin Doshi - June 22nd, 2010 at 14:57
hi
can you upload the example with all the javascript file referece, as i could not make it running, i want to test this for 40K records.
thanks in advance.
#2 by SolarAngellis - October 3rd, 2011 at 22:54
there is a way to add multiple category ? for example a powersports wbesite holds multiple category and within each cat there is different products …