Autocompletar con jQuery
En este mini tutorial veremos como utilizar un excelente plugin de jQuery para implementar la funcionalidad de autocompletar (suggest). Nosotros lo hemos utilizado para taggear, sugiriendo al usuario los tags existentes en el sistema, pero hay muchas más aplicaciones: en buscadores, ingreso de datos, etc.
El plugin que utilizamos fue Autocomplete (que va a pasar a formar parte de jQuery UI). Este plugin convierte un input o área de texto en autocompletable, y puede obtener los datos remotamente utilizando AJAX o localmente desde un array. En caso de que los datos sean pocos, lo recomendable es utilizar un array local, pero si ya se está en el orden de los cientos, lo mejor será utilizar AJAX para obtener los datos buscando desde por ej. la base de datos.
Inicializamos el plugin:
$().ready(function(){
$("#tags").autocomplete('buscar_tags.php',
{ multiple: true,
autoFill: true,
selectFirst: true,
formatItem: formatItem,
formatResult: formatResult } );
});
function formatItem(row) {
return row[0] + ” (” + row[1] + “)”;
}
function formatResult(row) {
return row[0];
}
En donde: multiple = true permite ingresar más de un valor autocompletado, autoFill: completa la palabara para poder seleccionarla presionando enter o tab, selectFirst hace que la primera sugerencia sea seleccionada si no se presiona enter o tab o se selecciona algo utilizando el puntero, formatItem es una función que permite formatear como se muestra cada item mientras que formatResult es una función que permite formatear cómo se muestra una vez seleccionado un ítem.
Otras posibilidades son:
- max: limitar la cantidad máxima de ítems
- minChars: mínima cantidad de caracteres que debe escribir el usuario para que se active el autocompletar
- etc
Cuando implementemos el código de buscar_tags.php, obtendremos en el parmámetro q del querystring el valor ingresado por el usuario. Por ejemplo, si el usuario ingresa “foo” se generará un request de tipo: buscar_tags.php?q=foo&limit=10, donde limit tendrá el valor de la opción “max”. EL script buscar_tags.php deberá retoranar el resultado un ítem por renglón. Para el ejemplo de formatItem anterior podría ser:
foreach($resultados as $resultado) {
echo $resultado[0], "|", $resultado[1], "\n";
}
amigo podria explicar mejor, que no entendi lo que quiere decir con lo del plugin. no se que es si un .php, un .js o un script que se coloca en no se donde. por favor explique mas al respecto
viktor: en este caso nos estamos refiriendo a un plug-in de jQuery, que son archivos .js (javascript). Para utilizarlo debes descargar la libreria jQuery (www.jquery.com) y luego incluirlo en tu pagina junto con el plugin Autocomplete. Aqui encontraras una introduccion a jQuery.
Con todo respeto, tu combinación de colores es horrible, cansa la vista muy pronto, y por muy interesante que sea el contenido, dudo mucho que alguien aguante mas de dos minutos viendolo, por favor y para tu beneficio cambia los colores.
Gracias
Felix, muchas gracias por tu opinión. Habíamos detectado que el color del texto es demasiado claro, por lo que vamos a probar usando un tono más oscuro para ver cómo funciona.
Hola,
Muchas gracias por el tutorial, estoy tratando de usar este plugin en mi aplicación pero la documentación oficial es muy pobre en este sentido.
Serías tan amable de publicar tu código completo del php para tener una mejor idea de como implementar el plugin completamente. Y otra molestia, tu conoces como puedo utilizar la opción de llenar campos ocultos con el resultado de este plugin.
Saludos cordiales
Giovanni, justamente esta aplicación la tenemos implementada en .NET, pero puedo darte algunas sugerencias para el código del lado del servidor usando PHP:
En el ejemplo del post, el archivo buscar_tags.php es quien implementa la búsqueda de tags. Para esto, primero debes obtener lo que ha escrito es usuario, utilizando la variable q del querystring:
$valor = $_GET['q'];Una vez que tienes el valor que el usuario ha escrito, realizas la consulta a la base de datos, para obtener todos los tags que comiencen con dicho valor:
'SELECT tag_name, COUNT(tag_name) FROM tags WHERE tag_name LIKE "' . $valor. '% GROUP BY tag_name ORDER BY tag_name'
Donde tags es la tabla donde almacenas los tags y tag_name es el texto del tag. De esta forma obtienes la lista de tags y la cantidad de veces que aparece cada uno en la tabla. (esto puede variar según como hayas modelado los datos).
Puedes completar un campo oculto utilizando el handler result, de la siguiente manera:
$("#tags").autocomplete('buscar_tags.php',{ multiple: true,autoFill: true,
selectFirst: true,
formatItem: formatItem,
formatResult: formatResult } );
}).result(function(event, item) {
$('#id_campo_oculto').val(item[0]);
});
Espero te sea de ayuda.
[...] un artículo anterior describíamos cómo utilizar el plugin Autocomplete de jQuery para implementar un campo de texto [...]