Implementar sugerencias de búsqueda con Vue.js

Introducción

En este proyecto, aprenderás a implementar una función de sugerencias de búsqueda de entrada utilizando Vue.js 2.x. Esta función se utiliza comúnmente en aplicaciones web para proporcionar a los usuarios una lista de datos coincidentes a medida que escriben en la entrada de búsqueda.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo poner en mayúscula la primera letra de los encabezados de la tabla en la tabla de datos
• Cómo implementar la funcionalidad de sugerencias de búsqueda basada en la entrada del usuario

🏆 Logros

Después de completar este proyecto, podrás:

• Manipular el DOM utilizando directivas de Vue.js como v-for y v-model
• Crear propiedades calculadas en Vue.js para filtrar y mostrar los resultados de búsqueda
• Aplicar un estilo básico a la tabla y la entrada de búsqueda

Configurar la estructura del proyecto

En este paso, configurará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:

├── index.html
└── js
    └── vue.js

Entre ellos:

• js/vue.js es el archivo de Vue 2.x.
• index.html es el código de implementación de la lógica de diseño y funcionalidad de la página.

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

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

La función de sugerencias de búsqueda aún no se ha implementado.

Poner en mayúsculas los encabezados de la tabla

En este paso, aprenderás a poner en mayúscula la primera letra de los encabezados de la tabla en la tabla de datos.

1. Abre el archivo index.html en tu editor de código.
2. Localiza la sección de encabezados de la tabla en el código HTML:

<thead>
  <tr>
    <td v-for="col in columns">
      {{col.slice(0,1).toUpperCase() + col.slice(1)}}
    </td>
  </tr>
</thead>

3. La directiva v-for se utiliza para recorrer el array columns y mostrar los correspondientes encabezados de la tabla. El código {{col.slice(0,1).toUpperCase() + col.slice(1)}} se utiliza para poner en mayúscula la primera letra de cada nombre de columna.

   • col.slice(0,1) extrae el primer carácter del nombre de la columna.
   • .toUpperCase() convierte el primer carácter a mayúsculas.
   • + col.slice(1) concatena el primer carácter en mayúsculas con el resto del nombre de la columna.

4. Guarda el archivo index.html y actualiza la página. Ahora deberías ver los encabezados de la tabla con la primera letra en mayúsculas.

Implementar sugerencias de búsqueda

En este paso, aprenderás a implementar la funcionalidad de sugerencias de búsqueda.

1. En el archivo index.html, encuentra la entrada de búsqueda y el código correspondiente de Vue.js, y agrega el siguiente código:

<span>Buscar nombres: </span>
<!-- Agrega el código v-model -->
<input placeholder="Ingrese el nombre a buscar" v-model="searchQuery" />

data: {
  searchQuery: "",
  //... otras propiedades de datos
},

// El siguiente código es el código que se debe agregar
computed: {
  newData() {
    return this.data.filter((item) => {
      return item.name
     .toLowerCase()
     .includes(this.searchQuery.toLowerCase());
    });
  }
}

2. La propiedad de datos searchQuery está vinculada a la entrada de búsqueda mediante la directiva v-model. Esto permite que la instancia de Vue.js siga la entrada del usuario.
3. La propiedad computada newData filtra el array data según el valor de searchQuery. Verifica si la propiedad name de cada elemento de datos incluye la consulta de búsqueda (sin distinguir mayúsculas y minúsculas).
4. Los datos filtrados se muestran luego en el cuerpo de la tabla:

<tbody>
  <tr v-for="entry in newData">
    <td v-for="col in columns">{{entry[col]}}</td>
  </tr>
</tbody>

5. La directiva v-for se utiliza para recorrer el array newData y mostrar cada elemento de datos en una fila de la tabla.
6. Guarda el archivo index.html y actualiza la página. Ahora deberías poder ver que la funcionalidad de sugerencias de búsqueda funciona como se esperaba.

Ahora, has completado la implementación de la función de sugerencias de búsqueda de entrada en el proyecto de Vue.js proporcionado. El resultado final es el siguiente:

Resumen

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