Cómo crear un buscador con jQuery

Para uno de mis proyectos de la escuela tenía que construir una aplicación distribuida, pero en esa tenía que implementar una búsqueda de alumnos, por nombre,matricula, etc. La verdad nunca me gustó eso de tener un botón para buscar por cada una de las categorías, así que mejor me hice un pequeño buscador que te mostraba los datos mientras escribías.

Lo que vamos a hacer hoy es eso, un buscador con jQuery, buscador muy local porque no trae datos de las bases de datos o de internet, busca en base a contenido en la misma página, contenido que nosotros restringimos y que sin duda nos puede ayudar a eficientar muchas tareas, por ejemplo, filtrar datos sin tener que volver a hacer una llamada a la BD, o como buscador de canciones en una aplicación web, muy al estilo de muchos buscadores en las aplicaciones actuales.

Dificultad del tutorial: fácil

Demo del tutorial

HTML

En mi caso yo puse los elementos a buscar en una capa con una clase igual, para que de esa forma al momento de buscar sólo se centre en buscar en el contenido que tengan las capas con esa clase. También ponemos un campo de texto que nos va a servir para escribir lo que queremos buscar.

 

jQuery

Lo fundamental de este código es entender lo que vamos a realizar. Lo más importante es que recorramos todos nuestros elementos en busca de lo que buscamos, si tenemos una referencia de que el texto que introducimos es igual al que está en el contenido de las capas entonces no hacemos nada. En realidad si no va encontrando coincidencia alguna ocultamos esa capa, de esa forma dejamos al final las capas que si tienen alguna coincidencia con lo que estamos buscando.

Empezamos definiendo el evento para nuestra caja de texto, que va a ser cada vez que una tecla luego de ser presionada se suelte, así aseguramos que se busque el texto tal y como va siendo escrito.

Lo que sigue es nuestra función como tal. Lo que vamos a hacer es que cada que se presiona una tecla y se libere nosotros vamos a poner un ciclo para que revise todas las capas donde queremos buscar. Usamos la función indexOf() para saber si lo que buscamos existe, ya que si regresa –1 quiere decir que no encontró nada. En ese caso ocultamos la capa i, de tal manera que cuando termine el recorrido sólo estén las capas que contengan el string que nosotros escribimos en la caja de texto.

Para hacerlo menos restrictivo convierto lo que tiene la caja de texto y el contenido de las capas a minúsculas, para que no haya ningún problema sobre mayúsculas y minúsculas, todo se trata igual.