Navegando por Internet me he encontrado con varios plugins para jQuery que nos permiten mostrar u ocultar elementos de acuerdo a filtros de “búsqueda”, varios de estos plugins son muy útiles y el dinamismo con el que hacen el filtrado es muy agradable, dándole así cierta vida a nuestro sitio.
El problema con algunos de éstos es la compatibilidad con versiones de IE, ya que hay veces en que funciona y otras no, con algunos otros resulta poco la facilidad de personalización. Pero si lo que no tenemos es tiempo para estar estudiando y entendiendo la documentación de dichos plugins está la opción de hacer las cosas a nuestro gusto y sin tantas complicaciones. En el siguiente ejemplo veremos una manera sencilla de cómo mostrar u ocultar elementos de acuerdo a diferentes filtros de búsqueda:
<!DOCTYPE html><html lang="es">
<head><meta charset="utf-8" />
<title>Filtrar Elementos con jQuery</title>
<link href="estilos.css" rel="stylesheet" />
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul.listado li a').click(function() {
var textoFiltro = $(this).text().toLowerCase().replace(/\s/g,"-");
if(textoFiltro == 'todos')
{
$('div.filtros div.hidden').fadeIn('slow').removeClass('hidden');
}
else
{
$('.filtros div').each(function()
{
if(!$(this).hasClass(filterVal))
{
$(this).fadeOut('normal').addClass('hidden');
}
else
{
$(this).fadeIn('slow').removeClass('hidden');
}
});
}
return false;
});
});
</script>
</head>
<body>
<section>
<ul class="listado">
<li><a href="#">Todos</a></li>
<li><a href="#">Rojos</a></li>
<li><a href="#">Azules</a></li>
<li><a href="#">Amarillos</a></li>
</ul>
<div class="filtros">
<div class="rojos"> </div>
<div class="azules"> </div>
<div class="azules"> </div>
<div class="amarillos"> </div>
<div class="rojos"> </div>
<div class="amarillos"> </div>
<div class="amarillos"> </div>
<div class="azules"> </div>
<div class="rojos"> </div>
</div>
</section>
</body>
</html>
Lo primero que debemos hacer es crear los filtros de búsqueda, tal y como lo vemos en las siguientes líneas, después creamos un contenedor que tenga los elementos relacionados con cada filtro:
<ul class="listado">
<li><a href="#">Todos</a></li>
<li><a href="#">Rojos</a></li>
<li><a href="#">Azules</a></li>
<li><a href="#">Amarillos</a></li>
</ul>
<div class="filtros">
<div class="rojos"> </div>
<div class="azules"> </div>
<div class="azules"> </div>
<div class="amarillos"> </div>
<div class="rojos"> </div>
<div class="amarillos"> </div>
<div class="amarillos"> </div>
<div class="azules"> </div>
<div class="rojos"> </div>
</div>
La magia está en donde escribiremos el código que se encargará de hacer los filtros. Lo primero que debemos hacer es aplicar un evento clic a los textos que estén dentro de nuestra ancla, ubicada en la lista con la clase listado. Posteriormente en el texto al cual dimos clic lo pasamos a minúsculas, le quitamos los espacios en blanco existentes y lo asignamos a la variable textoFiltro.
$('ul.listado li a').click(function() {
var textoFiltro = $(this).text().toLowerCase().replace(/\s/g,"-");
Lo interesante es que donde hacemos un bucle con el método each() de jQuery, obtendremos todos los divs que se encuentren dentro de otro contenedor con la clase filtros. En la siguiente línea comparamos si el elemento NO tiene una clase que se llame igual al mismo valor que contiene la variable textoFiltro, entonces se ocultará, caso contrario se mostrará lo siguiente:
$('.filtros div').each(function() {
if(!$(this).hasClass(filterVal))
{
$(this).fadeOut('normal').addClass('hidden');
}
else
{
$(this).fadeIn('slow').removeClass('hidden');
}
});
Así es como hacemos un filtro de búsqueda de elementos usando jQuery sin necesidad de plugins adicionales, para ver el ejemplo en funcionamiento accede al siguiente link.
Hola, ante todo felicitaciones por el tutorial, muy facil de entender!.
Escribo porque estoy con un problema a la hora de la utilización.
Tengo un codifo en javascript quie muestro los datos de un xml dentro del div de la 'categoria' (rojos, azul, etc). Mi problema es el siguiente:
En la siguiente linea, muestro los datos del xml en divs, cosa que <div class="'+categoria+'"> vendria a ser como <div class="rojos">.
El problema que tengo es que si pongo otros divs dentro del <div class="'+categoria+'"> no me funciona el filtrado. pero si solo dejo <div class="'+categoria+'">'+categoria+'</div> y le quito todo lo demas funciona.
La linea completa:
$cont.append('<div class="'+categoria+'">'+categoria+'<div class="contenedor_receta"><div class="receta_foto"><img src="'+foto+'" /></div><div class="receta_contenido"><div class="receta_categoria">'+categoria+'</div><a class="receta_titulo" href="'+id+'">'+titulo+'</a><br /><a class="receta_porciones">Porciones: '+porciones+'</a></div><div class="clear"></div></div></div>');
Sabes que puede estar pasando?.
Gracias!.
Es muy raro, deveria funcionar pero como lo haces es mas difícil de entender, podrías hacerlo guardando todo ese código en una variable y después pasarla a la función append, así puedes manipularlo mas rapido y usa Alerts para ver que información no pasa o que no funciona.
haz probado con el complemento firebug (para firefox o chrome) para ver que estás recibiendo??
por favor dinos si ya se solucionó el problema, sino para buscar la solucion
Y si desde otra página quisiera llamar por ejemplo : sólo a los rojos?
Es decir en otro url tengo botones (sólo botones) que dicen rojos y azules y al clickearlo quiero que vaya a la página con cuadros como la que tienes y que de inicio me muestre no todos los cuadros, sino sólo los rojos o sólo los azules.
Yo tengo un select con categorias obtenidas desde la base de datos, y otros select con subcategorias tambien obtenida desde la base de datos. Las subcategorias son muchas, lo que quiero es que al seleccionar una categoria, en el select de las subcategorias solo se muestren las de la categoria seleccionada, o sea que el primer select me sirva como filtro. me ayudan?
Puedes hacerlo via AJAX con JQuery y en tu backend realizar un servicio con json.