En un artículo anterior estuvimos analizando y haciendo una primera prueba con el plugin Autocomplete de jQuery UI, en la que aprendimos a utilizar ese plugin para sugerir valores de autocompletado que estaban en un array Javascript.

Obtener las sugerencias de autocomplete desde un array definido en el cliente no tiene nada de malo y es una opción perfectamente válida, pero no es eficiente en el caso que puedan existir muchas sugerencias de autocompletado.

En el caso del artículo anterior teníamos un campo donde debíamos escribir las provincias de España. Como las posibilidades eran sólo unas cuantas decenas, obtener las posibilidades de autocompletar desde un array Javascript es perfectamente válido. Pero pensamos en una aplicación como Google Maps, donde se escriben sugerencias para autocompletar direcciones o lugares del mundo... podríamos tener miles de poblaciones en solo país y millones de direcciones del mundo entero! Todo eso sería imposible de guardar en un array en el cliente, por lo que se debe hacer algo diferente.

La solución es tan sencilla como invocar un script remoto que nos devuelva las sugerencias para autocompletar el campo. A ese script se le pasará lo que el usuario haya escrito en el campo de autocompletado y se encargará de buscar palabras o términos que tengan similitud con aquello que se escribió. Las sugerencias para autocompletar el campo se deben devolver en formato JSON.

El ejemplo de campo autocompletar que hemos realizado para probar esta posibilidad se puede ver en una página aparte.

Configurar el campo autocompletar para la búsqueda remota de sugerencias

Para indicar a nuestro campo autocompetar que busque las sugerencias a través de un script remoto tenemos que indicar en el parámetro "source" de configuración del plugin la URL donde está el script que nos debe devolver las posibilidades de autocompletado.

$("#autoc2").autocomplete({
   minLength: 3,
   source: "buscar-autocompletar.php"
})

En este caso se utiliza un script PHP para buscar las sugerencias, que está en el archivo "buscar-autocompletar.php". Como no se especifica directorio, se supone que este archivo PHP está en la misma carpeta que la página desde donde se invoca.

Además, como se puede ver en el código anterior, se ha indicado otro parámetro de configuración del plugin llamado "minLength", que sirve para definir la longitud mínima que debe tener el texto escrito en el campo para que la función de autocompletar se active y se invoque al script para obtener sugerencias. Esto se hace por razones de rendimiento, para que el campo no se active hasta que el usuario haya escrito un número x de caracteres, de modo que no nos salgan demasiadas sugerencias ni se realicen accesos innecesarios al script que las genera.

Cuando se invoca al script para buscar las opciones para el campo autocomplete, jQuery envía automáticamente por el método GET aquello que se haya escrito en el campo de texto. Por ejemplo, si en el campo el usuario escribió las letras "pro", se invocaría al script PHP de la siguiente manera:

http://www.dominio.com/buscar-autocompletar3.php?term=pro

Formato JSON para las sugerencias de autocompletar

Como hemos dicho, el script de búsqueda debe devolver las opciones para el campo autocomplete en notación JSON. Ahora podemos ver cómo es el formato JSON que espera el campo de autocompletado para mostrar las sugerencias según se escribe.

[
   {"value":"valor 1","label":"Elemento 1"},
   {"value":"valor 2","label":"Elemento 2"},
   {"value":"otro valor cualquiera","label":"Elemento Lo que sea"}
]

Como se puede ver, en el JSON tenemos que especificar un array de diversos objetos con propiedades "label" y "value".

• La propiedad "label": sirve para definir el texto que se mostrará como sugerencia de autocompletado.
• La propiedad "value": sirve para definir el texto que se escribirá en el campo de autocompletar cuando se seleccione esta opción.

Ahora que ya conocemos cómo utilizar un campo autocomplete para extraer datos de una página remota, podemos aprender cómo generar esos valores de autocompletado a través de una base de datos con PHP.