webcamp.es

blog

producto

Crear filtro de búsqueda con jQuery

webcamp

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 😉

Demo

¡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:

ejemplo filtro jquery

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.

Diseño web en Granollers. Creación de páginas Wordpress, tiendas online con Prestashop, diseño y maquetación con HTML5, CSS3 y jQuery y mucho más.

categorias: css3, diseño, filter, filtro, fontawesome, html5, icons, jquery, tutorial
css3, diseño, filter, filtro, fontawesome, html5, icons, jquery, tutorial

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *