Posted By

metoikos on 01/24/11


Tagged

list jquery filter


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

saman
virendrakryadav


Jquery List Filter


 / Published in: jQuery
 

URL: http://papermashup.com/jquery-list-filtering/

  1. (function ($) {
  2. jQuery.expr[':'].Contains = function(a,i,m){
  3. return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
  4. };
  5.  
  6. function filterList(header, list) {
  7. var form = $("<form>").attr({"class":"filterform","action":"#"}),
  8. input = $("<input>").attr({"class":"filterinput","type":"text"});
  9. $(form).append(input).appendTo(header);
  10.  
  11. $(input)
  12. .change( function () {
  13. var filter = $(this).val();
  14. if(filter) {
  15.  
  16. $matches = $(list).find('a:Contains(' + filter + ')').parent();
  17. $('li', list).not($matches).slideUp();
  18. $matches.slideDown();
  19.  
  20. } else {
  21. $(list).find("li").slideDown();
  22. }
  23. return false;
  24. })
  25. .keyup( function () {
  26. $(this).change();
  27. });
  28. }
  29.  
  30. $(function () {
  31. filterList($("#form"), $("#list"));
  32. });
  33. }(jQuery));
  34.  
  35.  
  36.  
  37. <div id="wrap">
  38. <div class="product-head">
  39. <h1>Product Search</h1>
  40. <div id="form"></div>
  41. <div class="clear"></div>
  42. </div>
  43. <ul id="list">
  44. <li><img src="products/apple.png" width="30" height="30" align="absmiddle"/> <a href="#/Apple/">Apple</a></li>
  45. <li><img src="products/acorn_squash.png" width="30" height="30" align="absmiddle"/> <a href="#/Squash/">Acorn Squash</a></li>
  46. <li><img src="products/broccoli.png" width="30" height="30" align="absmiddle"/> <a href="#/Broccoli/">Broccoli</a></li>
  47. <li><img src="products/carrot.png" width="30" height="30" align="absmiddle"/> <a href="#/Carrot/">Carrot</a></li>
  48. <li><img src="products/celery.png" width="30" height="30" align="absmiddle"/> <a href="#/Celery/">Celery</a></li>
  49. <li><img src="products/lettuce.png" width="30" height="30" align="absmiddle"/> <a href="#/Lettuce/">Lettuce</a></li>
  50. <li><img src="products/mushroom.png" width="30" height="30" align="absmiddle"/> <a href="#/Mushroom/">Mushroom</a></li>
  51. <li><img src="products/onion.png" width="30" height="30" align="absmiddle"/> <a href="#/Onion/">Onion</a></li>
  52. <li><img src="products/potato.png" width="30" height="30" align="absmiddle"/> <a href="#/Potato/">Potato</a></li>
  53. <li><img src="products/pumpkin.png" width="30" height="30" align="absmiddle"/> <a href="#/Pumpkin/">Pumpkin</a></li>
  54. <li><img src="products/radish.png" width="30" height="30" align="absmiddle"/> <a href="#/Radish/">Radish</a></li>
  55. <li><img src="products/squash.png" width="30" height="30" align="absmiddle"/> <a href="#/Squash/">Squash</a></li>
  56. <li><img src="products/strawberry.png" width="30" height="30" align="absmiddle"/> <a href="#/strawberry/">Strawberry</a></li>
  57. <li><img src="products/sugar_snap.png" width="30" height="30" align="absmiddle"/> <a href="#/SugarSnaps/">Sugar Snaps</a></li>
  58. <li><img src="products/tomato.png" width="30" height="30" align="absmiddle"/> <a href="#/tomato/">Tomato</a></li>
  59. </ul>
  60. </div>

Report this snippet  

You need to login to post a comment.