javascript-typeahead-cazaresluis

En artículos anteriores hemos realizado reseñas sobre interesantes librerías escritas en JavaScript entre ellas jQuery Form Validation Plugin. En esta ocasión hablaremos del tema que a muchos desarrolladores web nos atañe y que en determinadas ocasiones no lo implementamos por lo tardado que puede llegar a ser la obtención de la información, me refiero a los campos con la funcionalidad de auto completado.

Recientemente he estado utilizando ACE plantilla para panel administrativo basada en Bootstrap que a su vez hecha mano de recursos externos para enriquecer su funcionalidad y vista. Tuve la necesidad de implementar un campo con auto completado y encontré javascript Typeahead jQuery Plugin de la mano de nuestros amigos de twitter.

JavaScript jQuery Typeahead plugin

Typeahead es una librería JavaScript flexible que proporciona una base sólida para la construcción de inputs para auto completado de información.

Como todo plugin javascript bien hecho cuenta con diferentes formas de carga de la información que dan un mejor panorama de como podemos implementarlo en nuestros proyectos de desarrollo web.

JavaScript jQuery Typeahead.js consume datos en Formato JSON lo que lo hace aún más interesante y flexible.

JavaScript jQuery Typeahead Características Visuales

Con JavaScript jQuery Typeahead.js podemos crear plantillas de diseño personalizadas inclusive mostrar los resultados como un Dropdown menú.

 JavaScript jQuery Typeahead Configuración Básica

Esta es la mas sencilla de todas y no necesita nada mas que crear una variable con los datos en JSON, lo podemos aplicar para campos en los que la lista es siempre la misma y no es muy extensa.

Configuración JavaScript

JavaScript jQuery Typeahead.js cuenta con un potente motor de sugerencias que ofrece características como pre carga o carga inteligente. Por ejemplo puedes tener un JSON como este

Para extraer deberíamos tener un javascript así:

Además JavaScript jQuery Typeahead.js permite sugerencias a partir de múltiples sets de datos.

javascript-typeahead-datasets-cazaresluis

En conclusión para implementar este tipo de comportamiento en nuestros formularios debemos hacer varías consideraciones entre ellas el tamaño de los sets de datos que se van a cargar o consultar.

¿NECESITAS APOYO PARA TUS DESARROLLOS WEB?

Desarrollo aplicaciones web a la medida, sistemas integrales de registro y reservación de hospedaje, front y back end, formularios de contacto todo con twig, php, mysql, jquery.

Contáctame

¿Te ha agradado este artículo?

Te invito a compartirlo en tus redes sociales o en su defecto a registrarte en mi newsletter en donde recibirás información de cada nuevo post o tutorial que publique.