Last active
August 29, 2015 14:14
-
-
Save eliezerfot123/65da37cd8acbfa656528 to your computer and use it in GitHub Desktop.
How to build a fast, simple list filter with jQuery
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Filtro de una lista fácil</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> | |
| <script> | |
| (function ($) { | |
| // Expresión css personalizado para mayúsculas y minúsculas contains() | |
| jQuery.expr[':'].Contains = function(a,i,m){ | |
| return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0; | |
| }; | |
| function listFilter(header, list) { | |
| // Crear y añadir la forma de filtro a la cabecera | |
| var form = $("<form>").attr({"class":"tuclase","action":"#"}), | |
| input = $("<input>").attr({"class":"tuclase","type":"text"}); | |
| $(form).append(input).appendTo(header); | |
| $(input) | |
| .change( function () { | |
| var filter = $(this).val(); | |
| if(filter) { | |
| // Esto encuentra todos los enlaces de la lista que contienen la entrada, | |
| // Y ocultar los que no contienen la entrada mientras que muestra los que lo hacen | |
| $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp(); | |
| $(list).find("a:Contains(" + filter + ")").parent().slideDown(); | |
| } else { | |
| $(list).find("li").slideDown(); | |
| } | |
| return false; | |
| }) | |
| .keyup( function () { | |
| // Disparar el evento de cambio más arriba después de cada letra | |
| $(this).change(); | |
| }); | |
| } | |
| $(function () { | |
| listFilter($("#header"), $("#list")); | |
| }); | |
| }(jQuery)); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="wrap"> | |
| <h1 id="header">List of countries</h1> | |
| <ul id="list"> | |
| <li><a href="">Australia</a></li> | |
| <li><a href="#/austria/">Austria</a></li> | |
| <li><a href="#/belgium/">Belgium</a></li> | |
| <li><a href="#/brazil/">Brazil</a></li> | |
| <li><a href="#/canada/">Canada</a></li> | |
| <li><a href="#/denmark/">Denmark</a></li> | |
| <li><a href="#/finland/">Finland</a></li> | |
| <li><a href="#/france/">France</a></li> | |
| <li><a href="#/germany/">Germany</a></li> | |
| <li><a href="#/greece/">Greece</a></li> | |
| <li><a href="#/ireland/">Ireland</a></li> | |
| <li><a href="#/israel/">Israel</a></li> | |
| <li><a href="#/italy/">Italy</a></li> | |
| <li><a href="#/japan/">Japan</a></li> | |
| <li><a href="#/luxembourg/">Luxembourg</a></li> | |
| <li><a href="#/mexico/">Mexico</a></li> | |
| <li><a href="#/netherlands/">Netherlands</a></li> | |
| <li><a href="#/norway/">Norway</a></li> | |
| <li><a href="#/poland/">Poland</a></li> | |
| <li><a href="#/portugal/">Portugal</a></li> | |
| <li><a href="#/russia/">Russia</a></li> | |
| <li><a href="#/spain/">Spain</a></li> | |
| <li><a href="#/sweden/">Sweden</a></li> | |
| <li><a href="#/switzerland/">Switzerland</a></li> | |
| <li><a href="#/turkey/">Turkey</a></li> | |
| <li><a href="#/united-kingdom/">United Kingdom</a></li> | |
| <li><a href="#/united-states/">United States</a></li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment