Construir una funcionalidad de búsqueda simple

Introducción

En este proyecto, aprenderás a usar JavaScript para implementar una funcionalidad de búsqueda simple. Aprenderás a vincular el evento input a una caja de entrada, procesar los datos de búsqueda y mostrar los resultados de búsqueda.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo vincular el evento input a una caja de entrada
• Cómo implementar el método handleInput para filtrar los datos de búsqueda
• Cómo renderizar los resultados de búsqueda en una lista

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Usar el método addEventListener para vincular eventos
• Usar el método filter para filtrar una matriz según una condición
• Manipular el DOM para actualizar los resultados de búsqueda

Configura la estructura del proyecto

En este paso, establecerás los archivos y la estructura del proyecto. Sigue los pasos siguientes para completar este paso:

Abre la carpeta del proyecto. La estructura de directorios es la siguiente:

├── css
│   └── style.css
├── index.html
└── js
    └── index.js

Donde:

• index.html es la página principal.
• css es la carpeta para almacenar los estilos del proyecto.
• js/index.js es el archivo JavaScript donde debes agregar código.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

Luego, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Muestra los resultados de búsqueda

En este paso, implementarás el método render para mostrar los resultados de búsqueda.

1. En el archivo js/index.js, localiza el método render en el objeto search.
2. Dentro del método render, agrega el siguiente código para generar la plantilla HTML de los resultados de búsqueda y actualizar el elemento listEl:

const template = this.data.reduce(
  (prev, next) => prev + `<li>${next.content}</li>`,
  ""
);
this.listEl.innerHTML = template;

El método reduce se utiliza para crear una cadena de plantilla HTML que muestra la propiedad content de cada elemento en la matriz data.

Implementa el método handleInput

En este paso, implementarás el método handleInput para procesar la funcionalidad de búsqueda.

1. En el archivo js/index.js, localiza el método handleInput en el objeto search.
2. Dentro del método handleInput, agrega el siguiente código para filtrar la matriz data según el valor de entrada y luego mostrar los resultados de búsqueda:

const value = e.target.value;
// Usa un temporizador para simular el envío de una solicitud ajax y la recepción de datos
setTimeout(() => {
  this.data = !!value
    ? data.filter((val) => val.content.indexOf(value) !== -1)
    : [];
  this.render();
});

La función setTimeout se utiliza para simular una operación asincrónica, como una solicitud AJAX, para recibir los datos de búsqueda.

Asocia el evento de entrada

En este paso, aprenderás a vincular el evento input a la caja de entrada y a llamar al método handleInput cuando cambie el valor de la caja de entrada.

1. Abre el archivo js/index.js.
2. Localiza la función handle en el objeto search.
3. Dentro de la función handle, agrega el siguiente código para vincular el evento input al elemento inputEl y llamar al método handleInput:

this.inputEl.addEventListener("input", this.handleInput.bind(this));

La parte bind(this) es importante para garantizar que this dentro del método handleInput se refiera al objeto search en sí mismo.

Después de completar estos cuatro pasos, el archivo js/index.js ahora debería tener la implementación completa de la funcionalidad de búsqueda y el proyecto debería funcionar como se esperaba. El efecto final debería ser el siguiente:

Resumen

¡Felicidades! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.