Archive for October, 2009
JavaScript List Search using jQuery
Posted by admin in JavaScript, jQuery on October 30th, 2009
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', ''); }); });