Búsqueda con JavaScript

Por Julio Giampiere Grados Caballero
Búsqueda con JavaScript

Aprende a crear un sencillo buscador con la ayuda de JavaScript, manipulando los distintos métodos que te entrega este lenguaje.

En la aplicaciones y páginas web, cada vez se ve más el uso de buscadores de distintos elementos, como es el caso de facebook, twitter, instagram y demás.

JavaScript, el lenguaje del momento, nos permite poder realizar una búsqueda de acuerdo a un conjunto de datos a ser encontrados, utilizando simple recorrido a un array y un algoritmo que lo veremos a detalle a continuación:

Array. Son un conjunto de datos ordenados por posiciones, todos asociados en una sola variable, dichos datos pueden ser de cualquier tipo de dato, es decir, que es posible crear una array que tenga una cadena en la primera posición, un número en el segundo, un objeto en el tercero y así sucesivamente. 

Substring. Extrae los caracteres de una cadena, entre los dos índices especificados y devuelve una nueva subcadena.

Length. La propiedad length devuelve la longitud de una cadena (número de caracteres).,

ToLowerCase. Convierte una cadena a minúsculas. El método toLowerCase () no modifica la cadena original.

Onkeyup. El evento onkeyup se produce cuando el usuario suelta una tecla (en el teclado).

A través del uso de estos conceptos se realiza la idea del buscador, adicional a estos, usamos otros conceptos para agregar los elementos encontrados, donde usamos la creación de nodos y se agregan a un elemento del DOM existente. 

Lo que tenemos que hacer, es agregar un contenido sobre el input (letras) y de cumplir la coincidencia con las palabras indicadas sobre el array, serán mostradas debajo del input.


El objetivo de este tutorial es mostrar, que con la ayuda de distintos métodos y propiedades JavaScript, podemos lograr realizar un buscador, fácil y sencillo y así poder añadirlo a nuestras páginas o aplicaciones web.

Si deseas conocer más sobre JavaScript e ingresar al mundo de este lenguaje te recomiendo el curso de JavaScript que tienes disponible en DevCode.

¿Te gustó el tutorial?

Ayúdanos a llegar a más personas

Julio Giampiere Grados Caballero

Julio Giampiere Grados Caballero