Crear Autocomplete
Cuando permitimos que el usuario introduzca información libremente en un campo corremos el riesgo que no siempre lo va a escribir de forma correcta, ya sea que agregue un espacio entre las letras, coloque algún error ortográfico o simplemente omita parte de la información.
Si realmente necesitamos que ese campo esté llenado correctamente tenemos varias opciones, una es realizar un elemento select para que elija la opción más adecuada o también podemos utilizar el autocomplete.
Autocomplete
El autocomplete no es más que una forma en la cual cuando el usuario empieza a escribir si la información ya existe se va completando hasta que no queda otra opción, en caso que no exista podemos o agregarla o no permitir que se siga cargando los datos.
Requerimientos
Necesitamos una instalación estándar de una aplicación Laravel, adicionalmente debemos tener jQuery y jQueyUI, podemos utilizar la versión del CDN de google o también podemos descargar los archivos .js y .css y colocarlos en nuestro directorio public/js y public/css respectivamente.
Procedimiento
1- Debemos crear una ruta donde podamos llegar al formulario que tendrá el autocomplete, esta es una ruta normal.
2- En la carpeta app/views debemos construir nuestro formulario, para ello vamos a crear un archivo llamado autocomplete.php o el nombre que hayamos definido en nuestra ruta. Veamos en la siguiente imagen un código con el ejemplo:
En el ejemplo vemos como establecemos los vínculos necesarios para poder utilizar jQuery y jQueryUI, luego creamos nuestros campos, en este caso hemos creado un campo llamado response que es el campo que recibirá nuestra elección en el autocomplete, al final del archivo hemos creado una sección Javascript que es la que invoca al método autocomplete sobre el selector de nuestro campo auto, vemos que tenemos una propiedad llamada source, esta va a llamar al archivo o ruta que nos dará la fuente con los datos, una vez que se elija vemos como se coloca el valor al campo response.
3- Debemos ahora crear nuestra ruta para la propiedad source, en el caso del ejemplo se llama getdata, por lo que debemos proceder a generarla con ese nombre, veamos:
Lo otro que podemos notar en esta ruta es que creamos un array con las opciones disponibles, así podemos agregar nuestros propios datos, en el caso del ejemplo hemos hecho un pequeño array de colores, al final la ruta va a retornar dicho array en formato JSON para que pueda ser recibido por el complemente del autocomplete en el formulario.
El funcionamiento es bastante sencillo cada vez que escribimos en el campo auto, se activa una petición AJAX a nuestra vista “getdata”, si coincide lo que escribimos con algo del array de colores se puede seleccionar la opción y esta es colocada en el campo response.
Como podemos notar realizar un campo con funciones de autocomplete es bastante fácil utilizando las librerías jQuery correspondientes. Aquí lo importante a notar es como utilizamos la estructura de Laravel para lograr el objetivo, es decir, escribimos código de la forma estándar de Laravel y podemos incluir funcionalidades de librerías AJAX y Javascript.
)
