Seguro que encuentras allá fuera muchas opciones para el manejo de listas con la opción de autocompletar, pero si ya utilizas jQuery te recomiendo el componente que viene con jQuery UI. Es muy sencillo de utilizar y lo programas de una forma bastante simple.
No tendría mucho caso mencionar todo lo que puedes hacer con el plugin, puesto que para esto están tantos sitios de referencia. Lo que voy a mostrarte es una aplicación práctica que, con algunas modificaciones, puede ser de mucha utilidad para tus aplicaciones Web.
Autocompletar con jQuery
Supongamos que deseas desarrollar un formulario que te servirá para capturar productos. Como tu catálogo de productos es enorme, no puedes darte el lujo de descargar todas las opciones. Te conviene crear un catálogo con un índice que sea efectivo y traer solamente aquella información que sea de utilidad.
Vamos a crear un formulario que contenga 2 campos: cantidad y nombre de producto; así como un script que nos proveerá la información correspondiente. Tendremos una rutina en PHP que nos proveerá la información que necesitamos en forma de un arreglo de objetos y formateados en JSON. Esto último porque verás que es muy sencillo bajar información para utilizarla en javascript a conveniencia.
Paso #1: Cargar las librerías de jQuery
En esto, como en tantas cosas en esta vida, nadie se pone de acuerdo. Lo más común es colocarlas al inicio del documento, dentro de la sección de cabecera de tu formulario, pero soy de los que prefieren ponerlo hasta abajo, nada más por pura rebeldía. Bueno no, no es verdad, tengo la loca idea de que prefiero que el documento se descargue y el usuario vea un algún cambio, antes de que comience el proceso de los scripts.
Aquí un ejemplo de como podría ser tu formulario:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="jquery.ui.css"/> </head> <body> <form autocomplete="off"> <table> <tr> <th>Cantidad</th> <th>Producto</th> <th>Precio</th> <th>Importe</th> </tr> <tr> <td><input id="txtCantidad" type="text" value="1" /></td> <td><input id="txtProducto" type="text" /></td> <td><label id="lblPrecio">0.00</label></td> <td><label id="lblImporte">0.00</label></td> </tr> </table> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script type="text/javascript"> // colocar rutina de inicio aqui </script> </body> </html>
Paso #2: Definir la rutina de autocompletar con jQuery
Siempre es una buena idea comenzar a trabajar justo cuando ya todo está listo o se ha descargado. Si no lo haces así, luego aparecen los famosos “Errores Fantasma” que provocan que ciertas partes de tus script no trabajen de forma adecuada.
Para comenzar, localiza la línea comentada en el ejemplo anterior en donde dice que debes colocar la rutina de inicialización y coloca lo siguiente:
// esta rutina se ejecuta cuando jquery esta listo para trabajar
$(function()
{
// configuramos el control que hemos de utilizar para la busqueda de productos
$("#txtProducto").autocomplete({
source: "buscar.php", /* este es el script que realiza la busqueda */
minLength: 2, /* le decimos que espere hasta que haya 2 caracteres escritos */
select: productoSeleccionado, /* esta es la rutina que extrae la informacion del producto seleccionado */
focus: productoFoco /* esta es la rutina que muestra del producto marcado */
});
});
Paso #3: Implementar los eventos “select” y “focus”
El evento “focus” se invoca cuando un elemento de la lista es resaltado. Esto ocurre cuando el usuario utiliza las flechas para moverse entre las opciones o cuando pasa el puntero del mouse entre las opciones. Para este plug in, que tenga el foco significa simplemente que está marcada, pues el foco real lo conserva el control, esto por si el usuario desea seguir escribiendo para modificar el filtro.
jQuery hace esto de forma predeterminada, pero solo funciona cuando la colección de elementos está formada por cadenas únicamente. Cuando la colección de elementos la conforma objetos (como en nuestro ejemplo), veremos escrito “[Object object]” en nuestro control.
A continuación un ejemplo de como manejarlo. Esto debes colocarlo después de la rutina de inicialización y dentro de las etiquetas del script:
// ocurre cada vez que se marca un elemento de la lista
function productoFoco(event, ui)
{
var producto = ui.item.value;
// no quiero que jquery despliegue el texto del control porque
// no puede manejar objetos, asi que escribimos los datos
// nosotros y cancelamos el evento
// (intenta comentando este codigo para ver a que me refiero)
$("#txtProducto").val(producto.descripcion);
event.preventDefault();
}
El evento “select” es el que se invoca cuando el usuario ha seleccionado una opción. De nueva cuenta, si la colección de elementos estuviera formada por cadenas jQuery haría muy bien el trabajo, pero si esta está formada por objetos veremos nuevamente el horroroso “[Object object]” en nuestro control.
A continuación un ejemplo de como manejarlo. Esto debes colocarlo justo después de la rutina anterior y dentro de las etiquetas del script:
// ocurre cuando se selecciona un producto de la lista
function productoSeleccionado(event, ui)
{
// recupera la informacion del producto seleccionado
var producto = ui.item.value;
var cantidad = $("#txtCantidad").val();
// vamos a validar la cantidad con un procedimiento muy simple
cantidad = parseInt(cantidad, 10); // convierte a entero
if (isNaN(cantidad)) cantidad = 0;
var precio = producto.precio;
var importe = precio * cantidad;
// actualizamos los datos en el formulario
$("#lblPrecio").text(precio);
$("#lblImporte").text(importe);
// no quiero que jquery despliegue el texto del control porque
// no puede manejar objetos, asi que escribimos los datos
// nosotros y cancelamos el evento
// (intenta comentando este codigo para ver a que me refiero)
$("#txtProducto").val(producto.descripcion);
event.preventDefault();
}
Paso #4: Agregar la rutina en PHP para la búsqueda
Deseo conservar este ejemplo lo más simple posible, por lo que no entraré en detalles de conexión a base de datos, ejecución de scripts y demás tareas para recuperar datos. Esto lo dejaremos para un post dedicado a este tema.
Lo que haré es crear un script muy simple con un arreglo de productos y cada vez que se ejecute el script, recuperaré el término o criterio de la búsqueda y filtraré los resultados:
<?php
// recuperamos el criterio de la busqueda
$criterio = strtolower($_GET["term"]);
if (!$criterio) return;
?>
[<?php
// esta es una lista con algunas opciones, aunque en la
// practica estos datos deben salir de alguna tabla
// en una base de datos
$productos = array(
"Tarjeta de red Wi-Fi" => 134.45,
"Tarjeta madre ECO" => 656.34,
"Ventilador Inteligente" => 24.56
);
// lo que haremos es algo extremadamente sencillo, recuerda que este no es el objetivo del demo:
// recorre el arreglo y si encuentras el texto, imprime el elemento.
// cada elemento debe tener la forma:
// { label : "lo que quieras que aparezca escrito", value: { datos del producto... } }
$contador = 0;
foreach ($productos as $descripcion => $valor)
{
if (strpos(strtolower($descripcion), $criterio) !== false)
{
// agregamos esta linea porque cada elemento debe estar separado por una coma
if ($contador++ > 0) print ", ";
print "{ \"label\" : \"$descripcion\", \"value\" : { \"descripcion\" : \"$descripcion\", \"precio\" : $valor } }";
}
} // siguiente producto
?>]
Guarda este código en un archivo que se llame “buscar.php”, ya que en el paso 2 hicimos que el control de autocompletado busque este archivo para obtener la información.
Conclusión
Este es apenas una pequeña parte de lo que se necesita para realizar una aplicación Web completa, pero espero que te de ideas de las posibilidades. No dudes en cambiar el código para ver los diferentes resultados o ponerte en contacto si tienes alguna duda.
Nota
Escribí este artículo hace mucho tiempo en otro blog de desarrollo que tuve, pero decidí rescatar este y otro material y colocarlo aquí porque 1) el otro blog murió hace mucho tiempo y, 2) porque pienso que aún puede ser de utilidad.
Deja un comentario