Comparte en Facebook Twitter Google+

select2-laravel-ajax

El plugin Select2 de JQuery permite crear campos de tipo “select” en nuestros formularios con la habilidad de agregar ciertas funcionalidades como búsqueda en tiempo real, etiquetas y algunas otras opciones realmente útiles.

Hoy vamos a implementar Select2 en Laravel usando JQuery y Ajax para buscar y cargar etiquetas de forma dinámica en un campo de texto.

Configuración de base de datos

Vamos a cargar algunas etiquetas dentro de una tabla en nuestra base de datos. De esta manera podremos consultar y obtener estos valores de forma dinámica usando Ajax.

Una vez creada la base de datos agrega las credenciales correspondientes al archivo .env

Creamos un nuevo modelo llamado Tag desde la consola con:

Y editamos su contenido agregando los atributos $table y $fillable de la siguiente manera:

Creamos una nueva migración para construir la tabla que contendrá las etiquetas. Esto lo hacemos desde la consola con:

También podemos crear un seeder para agregar algunos tags de prueba a la base de datos.

Y editamos el archivo databse/seeds/TagsTableSeeder de la siguiente manera:

Recuerda que para crear datos de prueba también puedes hacer uso de los model factories: Model factories en Laravel 5.1

Ahora debemos llamar a esta clase TagsTableSeeder en el archivo DatabaseSeeder:

Finalmente para aplicar estos cambios a la base de datos ejecutamos lo siguiente desde la consola:

Instalación y configuración de Select2

Lo primero que debemos hacer es descargar el plugin desde el sito oficial: https://select2.github.io/

Una vez descargado, abrimos el archivo comprimido descargado y extraemos el contenido de la carpeta dist/ al directorio public de nuestra aplicación de Laravel.

Creamos una vista que incluya los archivos del plugin dentro de resources/views/layout.blade.php

Ésta será la plantilla o layout base para la vista del formulario, aquí incluimos el CDN de Bootstrap.

Creamos una nueva vista que contiene el formulario con el campo para las etiquetas llamada form.blade.php

El nombre del campo es tags[], esto permite que todos los valores se envíen dentro de un array “tags”

Ahora necesitaremos una ruta para acceder a este formulario, dentro del archivo app\Http\routes.php agregamos lo siguiente:

Si tratamos de ingresar a url_del_proyecto/form vamos a obtener un error, debido a que no hemos creado la ruta “tags” que estamos usando dentro de la configuración del plugin select2.

Vamos a crear esta ruta “tags”

El plugin Select2 espera la data para llenar el campo con el siguiente formato:

Es por este motivo que se crea un nuevo array llamado $valid_tags en el bloque anterior.

Resultado

Finalmente si ingresas a url_del_proyecto/form tendrás un campo para agregar etiquetas con autocompletado usando Ajax.

Capture

Ejercicios

Este es apenas un ejemplo sencillo para mostrarte una de las ventajas de este plugin, pero aún faltan algunos detalles para hacer de este ejemplo un feature totalmente funcional. Esto es lo que puedes hacer para completar esta tarea:

  1. Agrega una controlador que capture el formulario y reciba el listado de tags.
  2. Si un tag no existe en la base de datos debería poder almacenarse.
  3. No se deben guardar Tags repetidos en la base de datos.

¿Necesitas ayuda?

Cada uno de los temas mencionados en la sección de ejercicios se explican con detalle en nuestro curso Curso de interfaces dinámicas con Laravel y jQuery. Si quieres aprender a crear aplicaciones de forma profesional y aprender a integrar diferentes herramientas de JQuery con Laravel, Registrate al curso ahora mismo y mejora tus habilidades como programador, te esperamos.

Esto ha sido todo por ahora, si te animas a resolver los ejercicios planteados puedes dejar tus resultados en la sección de comentarios, de igual manera si tienes una duda puedes plantearla allí.

Aprende PHP, Laravel y más por sólo 999 al mes: ver planes.

Lección anterior Cómo generar vista previa de los correos con Laravel Lección siguiente Editar archivos Sass en Laravel con Chrome Developer Tools