En este post te mostraré cómo hacer un autocompletado, autocomplete, auto completado o como le llames usando Bootstrap, Vue y una API.
De modo que al final (por si no sabes lo que es un autocompletado) se cuente con una caja en donde se complete mientras el usuario escribe, así como la búsqueda de Google.
Te mostraré dos ejemplos, uno en donde los resultados se completan localmente, y otro en donde se hace una búsqueda para traer los resultados de la API en tiempo real. Voy a dejar el código completo al final.
Nota: si buscas un autocompletado con JavaScript puro, mira Awesomplete.
Componente para autocompletado
La librería que vamos a usar, y que nos va a proporcionar el autocompletado en un input será vue-bootstrap-typeahead cuyo repositorio está en GitHub.
Lo debemos incluir o instalar con NPM; para este ejemplo yo lo usaré con JavaScript puro y navegador, sin preprocesadores así que lo incluyo con:
Como te puedes dar cuenta, son dos archivos; uno es el de los estilos y otro es el script. Ambos están disponibles en unpkg.com.
Luego de incluirlo, se debe registrar como componente antes de instanciar tu app de Vue:
Eso es lo que necesitamos.
Autocompletado con arreglo estático
Este componente para autocompletar se basa simplemente en un arreglo. Veamos su uso más básico en donde autocompleta a partir de un arreglo.
Comenzamos definiendo el autocompletado. Por cierto, recomiendo encerrarlo en un div.
Fíjate en dos cosas. El v-model tendrá lo que el usuario escriba (puedes usarlo más tarde para detectar que la búsqueda cambió usando watch). Ahora, en data se define el arreglo de datos para completar, que en este caso está definido dentro de JavaScript.
Presta atención a data, pues hay que refrescar ese arreglo cuando se quiera autocompletar por búsqueda.
Existe también el evento hit que es cuando el usuario selecciona un elemento de la lista. En este caso estamos invocando al método onNombreSeleccionado. Veamos ahora el JavaScript:
El método onNombreSeleccionado se invoca cuando el usuario selecciona un elemento. El primer argumento de la función es el elemento. Ahí puedes hacer lo que tú quieras, en este caso simplemente modifico una propiedad llamada nombreSeleccionado.
Puedes probar este primer ejemplo en este enlace.
Autocompletar con API
Para este ejemplo utilicé la API de Wikipedia. He comentado el código, y lo he dejado listo para que puedas cambiar la ruta de donde se obtienen los datos.
La función serializer
Antes de empezar quiero mostrarte la función adicional que acepta el autocomplete y se llama serializer. Esta función sirve para convertir el objeto a cadena y mostrarla amigablemente en la lista; en otras palabras, serializa los resultados.
Si conoces Java entonces este método sería algo como el método toString. En mi caso como cada artículo de la wikipedia tiene snippet y title (entre otros) defino la función así:
Una vez explicado esto, veamos cómo funciona.
Completando datos cuando el usuario escribe
El algoritmo es sencillo. Escuchamos el evento de cambio de búsqueda, es decir, cuando el valor cambia. En ese momento consultamos la API, traemos los datos y actualizamos el arreglo.
Con los resultados, el autocompletado mostrará lo que coincida y listo. Por cierto, en este caso no estamos esperando a que la API regrese un resultado para permitir otra búsqueda, ni estamos usando debounce pues quise hacer el tutorial lo más simple posible.
Definimos el input para autocompletado, los métodos, etcétera:
En JavaScript definimos el comportamiento:
Espero que los comentarios sean suficientes, y si no, ahí está la caja de comentarios. Al probarla se ve así:
De este modo estamos autocompletando resultados a partir de una API que se comunica a través de JSON. Obviamente esta API puede estar programada en cualquier lenguaje de tu elección, o igualmente puedes usar una API pública.
Puedes probar el ejemplo aquí.
Conclusión
He colocado el código de estos dos ejemplos en mi GitHub; si quieres dales un vistazo. Te invito a leer más sobre:
Nos leemos después.
