Todos conocemos los campos que cuentan con la función de autocompletar, al menos todos los que utilizamos Google a diario. Crear este tipo de soluciones no es tan sencillo como podríamos pensar en una primera instancia, existen no solo complicaciones técnicas sino también vinculadas a una correcta representación en los distintos navegadores. Para nuestras suerte es que existe Autocomplete jQuery.
Autocomplete jQuery es un potente plugin para incorporar la función de autocompletado a nuestros proyectos de una manera sencilla. Su compatibilidad con los distintos navegadores es muy buena, soporta perfectamente: IE 7+, Firefox 2+, Safari 3+ y Opera 9+.
También su licencia MIT es un punto favorable, la misma nos da libertad para utilizar este proyecto con gran soltura. No obstante cuenta con una característica que es fantástica y que no la tienen alternativas similares y es que trabaja con cache, este aspecto es fundamental para garantizar una buena experiencia del usuario.
Que las consultas sean guardadas en una cache significa que no vamos a realizar peticiones adicionales a nuestro servidor, guardando los resultados garantizamos, en cierta medida, no sobrecargar nuestros recursos. Por ejemplo, si hacemos una consulta la misma es guardada en una cache local, de esta manera y en caso de repetir la consulta, la misma se realiza una sola vez al servidor y no dos como en la mayoría de las soluciones similares.
En el sitio oficial del autor pueden encontrar una demostración online, una pequeña aclaración si son de Argentina, lamentablemente en el ejemplo el autor «olvido» agregarnos a la base de datos de donde se levantan las sugerencias. Así que prueben otros países 😛
Ejemplo de función autocompletar:
Por un lado necesitamos colocar el código HTML:
<input type="text" name="country" id="autocomplete"/>
La consulta AJAX se configura desde la inicialización del plugin:
$('#autocomplete').autocomplete({
serviceUrl: '/autocomplete/countries',
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});
También podemos hacer la consulta directamente desde un archivo local (sin ajax):
var countries = [
{ value: 'Andorra', data: 'AD' },
// ...
{ value: 'Zimbabwe', data: 'ZZ' }
];
$('#autocomplete').autocomplete({
lookup: countries,
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});
Luego restaría todo lo relacionado a lo visual, esto es de lo más sencillo, solo requiere trabajar algunas clases predefinidas por el plugin, esto lo pueden ver perfectamente en el ejemplo que viene con la descarga. Para el funcionamiento básico solamente vamos a necesitar trabajar con 4 clases CSS.
El plugin también admite el trabajo de las respuestas en formato JSON. Formato que esta ampliamente divulgado por todo Internet (tutoriales, APIs de terceros, etc) y que funciona perfectamente con cualquier lenguaje de programación.
El resto del proyecto se explica solo con leer un poco la documentación oficial. Sinceramente de todos los plugins para realizar este trabajo que pude probar, este es uno de los más sencillo y mejor escritos. El sistema de cache que tiene es de vital importancia, imaginen que las sugerencias se realicen en base a una tabla de datos con miles de registros y empezaran a darse cuenta lo vital que resulta tener un sistema así.
Web: jQuery Autocomplete
