Filtrar resultados en jQuery

Hoy les presentamos un script realmente útil a la hora de darle al usuario la posibilidad de filtrar resultados en una lista...

El código tras el salto.

El código:

El siguiente código funciona buscando el texto vayamos generando, en cada elemento de la lista, y de esa manera elimina los elementos que no coincidan.

Clic para ver Texto Plano
JAVASCRIPT:
  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 = $("
  9. <form>").attr({"class":"filterform","action":"#"}),
  10. input = $("
  12. <input />").attr({"class":"filterinput","type":"text"});
  13. $(form).append(input).appendTo(header);
  14.  
  15. $(input)
  16. .change( function () {
  17. var filter = $(this).val();
  18. if(filter) {
  19.  
  20. $matches = $(list).find('a:Contains(' + filter + ')').parent();
  21. $('li', list).not($matches).slideUp();
  22. $matches.slideDown();
  23.  
  24. } else {
  25. $(list).find("li").slideDown();
  26. }
  27. return false;
  28. })
  29. .keyup( function () {
  30. $(this).change();
  31. });
  32. }
  33.  
  34. $(function () {
  35. filterList($("#form"), $("#list"));
  36. });
  37. }(jQuery));

El HTML:

Clic para ver Texto Plano
HTML:
  1. <div id="wrap">
  2. <div class="product-head">
  3. <h1>Product Search</h1>
  4. </div>
  5. <ul id="list">
  6.     <li><img src="products/apple.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Apple/">Apple</a></li>
  7.     <li><img src="products/acorn_squash.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Squash/">Acorn Squash</a></li>
  8.     <li><img src="products/broccoli.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Broccoli/">Broccoli</a></li>
  9.     <li><img src="products/carrot.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Carrot/">Carrot</a></li>
  10.     <li><img src="products/celery.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Celery/">Celery</a></li>
  11.     <li><img src="products/lettuce.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Lettuce/">Lettuce</a></li>
  12.     <li><img src="products/mushroom.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Mushroom/">Mushroom</a></li>
  13.     <li><img src="products/onion.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Onion/">Onion</a></li>
  14.     <li><img src="products/potato.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Potato/">Potato</a></li>
  15.     <li><img src="products/pumpkin.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Pumpkin/">Pumpkin</a></li>
  16.     <li><img src="products/radish.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Radish/">Radish</a></li>
  17.     <li><img src="products/squash.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/Squash/">Squash</a></li>
  18.     <li><img src="products/strawberry.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/strawberry/">Strawberry</a></li>
  19.     <li><img src="products/sugar_snap.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/SugarSnaps/">Sugar Snaps</a></li>
  20.     <li><img src="products/tomato.png" alt="" width="30" height="30" align="absmiddle" /> <a href="#/tomato/">Tomato</a></li>
  21. </ul>
  22. </div>

DEMO

Visto en PaperMashup

Be Sociable, Share!

Guardado en : Iugo, jQuery por alfonso

Deja un comentario

«
»