09 Sep Crear filtro de búsqueda con jQuery
Después de mucho tiempo vuelvo con una nueva entrada en el blog. Como la gran mayoría de mis posts, este también fué una necesidad de un proyecto que estaba creando.
En este caso lo que vamos a hacer es crear un filtro de búsqueda con jQuery muy sencillo.
Puedes descargarte el archivo al final de la entrada 😉
¡Vamos a empezar!
Para éste tutorial sería conveniente que tuvieras conocimientos básicos de HTML y jQuery.
Primero de todo creamos un archivo html5 llamado index.html con un link css de fontawesome, otro de main.css y un script de jquery antes del final del cierre de la etiqueta </body>:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>filtro jQuery</title> <!-- FONTAWESOME STYLES--> <link href="css/font-awesome.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </body> </html>
Dentro del body creamos un div contenedor con un identificador «container«. Dentro del contenedor añadimos un título «h1«, un div con una clase llamada contenido y dentro de este div creamos dos divisiones:
la primera con una clase «search» donde añadiremos nuestro campo de búsqueda:
<div class="search"> <input type="text" id="busqueda" placeholder="Buscar ..."> <i class="fa fa-search"></i> </div>
Y la otra una lista desordenada con distintos campos dentro de un título «h3«:
<ul> <li> <h3>lorem ipsum</h3> </li> <li> <h3>non ultrices</h3> </li> <li> <h3>In augue lacus</h3> </li> <li> <h3>Maecenas semper</h3> </li> <li> <h3>ridiculus mus</h3> </li> <li> <h3>Vivamus sapien</h3> </li> <li> <h3>augue massa</h3> </li> <li> <h3>Nulla faucibus</h3> </li> <li> <h3>Sed non libero</h3> </li> </ul>
*El texto es un lorem ipsum 😉
Aquí tienes el código completo:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <title>filtro jQuery</title> <!-- FONTAWESOME STYLES--> <link href="css/font-awesome.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div id="container"> <h1>Filtro <span>jQ</span>uery <img src="img/logo.png"></h1> <div class="content"> <div class="search"> <input type="text" id="busqueda" placeholder="Buscar ..."> <i class="fa fa-search"></i> </div> <ul> <li> <h3>lorem ipsum</h3> </li> <li> <h3>non ultrices</h3> </li> <li> <h3>In augue lacus</h3> </li> <li> <h3>Maecenas semper</h3> </li> <li> <h3>ridiculus mus</h3> </li> <li> <h3>Vivamus sapien</h3> </li> <li> <h3>augue massa</h3> </li> <li> <h3>Nulla faucibus</h3> </li> <li> <h3>Sed non libero</h3> </li> </ul> </div> </div><!-- /container --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </body> </html>
Una vez creado nuestro index.html, vamos a añadir un poco de estilo a nuestro documento. Para ello creamos un archivo main.css dentro de una carpeta css donde añadiremos el siguiente contenido:
* {
font-family: Arial;
}
#container {
text-align: center;
max-width: 1170px;
margin: 0 auto;
}
h1 span {
color: red;
}
h1 img {
max-width: 200px;
}
.content {
margin-top: 60px;
}
.search {
max-width: 300px;
margin: 0 auto;
position: relative;
}
.search input {
width: 300px;
padding: 10px;
border: 1px solid #cecece;
border-radius: 3px;
}
.search i {
position: absolute;
cursor: pointer;
right: -12px;
top: 9px;
}
ul {
padding: 0px;
margin-top: 40px;
}
ul li {
list-style-type: none;
float: left;
border: 1px solid #cecece;
padding: 10px;
margin: 10px;
width: 347px;
}
No comento el código porque entiendo que tienes conocimientos mínimos de css.
El resultado sería el siguiente:
Ahora le toca a lo bueno, el jQuery. ya hemos añadido el script que llama a jQuery antes del cierre de la etiqueta </body>, ahora solo nos queda crear un script (puedes crearlo a parte y llamarlo desde index.html) justo debajo de del anterior script e inicializamos jQuery:
$(document).ready(function(){
//código jQuery
});
vamos a empezar con el código y la funcionalidad del script. Primero de todo creamos 2 variables, una para el campo de texto y otra para el título que contiene cada lista:
$(document).ready(function(){
var busqueda = $('#busqueda'),
titulo = $('ul li h3');
});
A continuación añadimos la siguiente sintaxis:
$(titulo).each(function(){
var li = $(this);
//si presionamos la tecla
$(busqueda).keyup(function(){
//cambiamos a minusculas
this.value = this.value.toLowerCase();
//
var clase = $('.search i');
if($(busqueda).val() != ''){
$(clase).attr('class', 'fa fa-times');
}else{
$(clase).attr('class', 'fa fa-search');
}
if($(clase).hasClass('fa fa-times')){
$(clase).click(function(){
//borramos el contenido del input
$(busqueda).val('');
//mostramos todas las listas
$(li).parent().show();
//volvemos a añadir la clase para mostrar la lupa
$(clase).attr('class', 'fa fa-search');
});
}
//ocultamos toda la lista
$(li).parent().hide();
//valor del h3
var txt = $(this).val();
//si hay coincidencias en la búsqueda cambiando a minusculas
if($(li).text().toLowerCase().indexOf(txt) > -1){
//mostramos las listas que coincidan
$(li).parent().show();
}
});
});
Aunque el código está bien comentado vamos a explicarlo por partes:
$(titulo).each() -> Lee cada uno de los títulos de cada <li> y creamos una variable general que representará cada una de ellas con var li = $(this);
$(busqueda).keyup(function() -> le decimos que al presionar una tecla dentro del campo de texto haga toda la función y creamos una variable pasándola a minuscuas -> this.value = this.value.toLowerCase();
Puedes provarlo en el ejemplo. Si escribes con mayusculas automáticamente pasa el texto a minusculas.
Le pedimos una condición con if($(busqueda).val() != ») con el que pedimos que: si el campo de texto está vacío, cambie la clase de la <i> de fontawesome a fa fa-times que es una X y sinó else, cambie la clase a fa fa-search que es el icono de la lupa.
En otra condición le pedimos que si la clase de la etiqueta <i> es fa-times (X), al hacer click, borre el contenido del campo de texto con $(busqueda).val(»);
Y por último ocultamos o mostramos según el resultado del campo de búsqueda de la siguiente forma:
//ocultamos toda la lista
$(li).parent().hide();
//valor del h3
var txt = $(this).val();
//si hay coincidencias en la búsqueda cambiando a minusculas
if($(li).text().toLowerCase().indexOf(txt) > -1){
//mostramos las listas que coincidan
$(li).parent().show();
}
Lo que hacemos es primero ocultar todos los <li> y si hay alguna coincidencia con el contenido del campo de texto lo muestre.
Bueno, espero que te hayas enterado como mínimo de la mitad…
Aún así puedes descargarte el archivo y hacer con el lo que te de la gana 😉
Si tienes alguna duda puedes dejar un comentario o enviarme un mensaje privado en contacto.
Luis Perez
Publicado el 08:22h, 29 eneroHice tu ejemplo pero en un ejemplo dentro de un li hay 2 h3 uno con dígitos y otro con letras, y con ello no me hace el filtro, me toma solo letra o solo numero.
Como puedo cambiar eso
santiakus
Publicado el 15:27h, 29 eneroHola,
creo que porque lo que hace es buscar el texto del título por lo que lo hace con el primer h3 que encuentra…
Prueba en crear una variable que abarque el padre de los 2 h3:
titulo = $('ul li');//li es donde aparecen los 2 h3Prueba y me comentas 😉
Pedro Gil Guzman
Publicado el 10:53h, 21 eneroHola Amigos, le di un par de vueltas al código. Generalmente, queremos filtrar por un listado que hemos sacado de una base de datos, por lo que os voy a mostrar un ejemplo que simplifica y es muy útil,
Para empezar, cuando hagamos un listado, podemos encerrar dentro de un div o cualquier otro contenedor el contenido que vamos a filtrar, siguidamente un hidden sobre el valor que queremos filtrar
Al contenedor padre le asignamos el comiendo de id parent_ y el id del registros. Al hidden le añadimos el tributo id_regitro que luego vamos a utilizar para identificar rápidamente al parent. Con esta prática, realmente podríamos ubicar el hidden en cualerquier parte del html y actuaría exactamente igual. Ahora viene el script :
El input sobre el que vamos a escribir lo hemos llamado filtrar_resultado:
$(document).on(‘keyup’, ‘[name=»filtrar_resultados»]’ , function(){
// este es el valor del input
var term = $(this).val();
term = term.toLowerCase();
$(‘[name=»campo_filtrar»]’).each(function(){
// este es el valor del hidden
var txt = $(this).val();
txt = txt.toLowerCase();
// este es el valor del id del registro el cual vamos a usar para hacer hide y show del parent
var id_registro = $(this).attr(‘id_producto’);
// escndemos parent
$(‘#parent_’+id_producto).hide();
if(txt.indexOf(term) > -1){
// mostramos coincidencia
$(‘#parent_’+id_producto).show();
}
});
});
Espero sirva de ayuda a alguien!! saludos
santiakus
Publicado el 11:41h, 23 eneroHola Pedro,
¡muchas gracias por tu aporte! ::)
Aurelio Mendoza
Publicado el 00:31h, 27 abrilVoy a tratar de ponerlo a funcionar en mi pagina web, ojala me funcione, tu sabes si necesito agregar algo a un tablero de codepen?
abgel
Publicado el 23:21h, 02 junioMuchas gracias, tendras un ejemplo que incluya el html, soy novato y me cuesta mucho. gracias
JORGE ANDRES
Publicado el 21:44h, 29 junioAmigo, Que tal. Requiero un algoritmo como el que dices para implementar un filtro en una lista de base de datos. Pero lo que no le entiendo es como seria el codigo de la vista o el html. Si es posible hacerme un ejemplo mas claro del html
Julian Canche
Publicado el 15:10h, 15 eneroExcelente Post. En si el código me dio una idea de como resolver este problema. Use menos líneas de código pero me sirvió demasiado!!!