Recientemente, por parte de requerimientos funcionales en un proyecto web en el cual me encuentro trabajando, se solicitó que se aplicara la funcionalidad de autocompletado para obtener información relevante como ciudades, oficinas bancarias y afines, de una forma que no fuera tan a la de listas desplegables, debido a la cantidad de información.
Echando un poco de lectura, encontré la librería Mass-Autocomplete, la cual permite programar un campo de texto con la posibilidad de mostrar un listado para precisamente autocompletar la información.
El enlace al final del presente post, contiene mayor información, así como ejemplos y formas de uso, específicamente, explico a continuación mi experiencia:
1. Marcado html en el formulario:
La librería mencionada funciona con etiquetas de entrada de texto, para usarlo, se aplicó lo siguiente para la preparación del campo de texto.
<div mass-autocomplete="{debounce_blur:700}">
<input autocomplete-item="autocomplete_remote" type="text" />
</div>
2. Preparación lógica de consulta para autocompletado mediante ingreso de texto:
En javascript, específicamente en un controlador, se construyen las funciones que describen los llamados a consulta y los eventos asociados a la selección de información mediante el autocompletado.
Lo siguiente es un ejemplo de configuración:
... dentro de un controlador ...
var vm = this;
...
vm.autocomplete_remote = {
suggest : function (texto){},
on_error : console.log
on_select : function(selected){}
};
En (1), se puede observar en el html una directiva (autocomplete-item), el cual hace referencia a la configuración de los llamados a consultas de tipo autocompletado, éste último, cuentas con tres métodos:
- suggest: función que recibe el texto ingresado y ejecuta la consulta para autocompletar, dicha consulta puede controlar el número de caracteres ingresados.
- on_error: función que se encarga de guardar en log o de realizar operaciones relacionadas con el manejo de errores en la consulta.
- on_select: función de tipo callback que recibe el objeto seleccionado de la lista desplegable con los resultados de la consulta.
El resultado de haber aplicado la librería como dependencia al módulo angular de la aplicación web, y seguido las notas tanto en términos de html como de javascript, queda como se muestra en la siguiente imagen.
Demostración autompletado listado empresas
Aquí concluye la experiencia construyendo componentes de autocompletado usando angularjs, se comparte para efectos de proporcionar conocimiento y prácticas sobre el uso de librerías y herramientas afines que proveen respuesta a funcionalidades que ya han sido creadas, promover notas como DIY y dar a conocer experiencias relacionadas.
Hasta una próxima.
---
Enlace Mass-Autocomplete : http://hakib.github.io/MassAutocomplete/
