Implementa Autocomplete AJAX en Laravel 11 con jQuery UI
En el desarrollo web moderno, la experiencia del usuario es clave. Una de las herramientas más efectivas para mejorar esta experiencia es implementar la función de autocompletado. En este artículo, exploraremos cómo integrar el autocompletado AJAX en Laravel 11 utilizando jQuery UI, un método que facilita la búsqueda en tiempo real y mejora la interacción del usuario con la plataforma.
¿Qué es Autocomplete AJAX?
El autocompletado AJAX permite que, a medida que el usuario escribe en un campo de búsqueda, se muestren sugerencias pertinentes basadas en datos almacenados en el servidor. Este enfoque no solo ahorra tiempo al usuario, sino que también lo guía hacia resultados relevantes, aumentando la probabilidad de que encuentre lo que busca de manera más eficiente.
Preparativos: Instalación de Laravel 11
Antes de comenzar con la implementación del autocompletado, asegúrate de tener Laravel 11 instalado. Puedes instalar Laravel siguiendo los pasos en su documentación oficial. Una vez que tengas tu proyecto listo, será el momento de pasar a la configuración de jQuery y jQuery UI.
Añadir jQuery y jQuery UI
Para usar jQuery UI en tu proyecto, primero debes incluirlo. Puedes hacerlo añadiendo los siguientes enlaces en la sección <head> de tu archivo Blade:
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
Con esto, tendrás jQuery y jQuery UI listos para ser usados.
Crear la Base de Datos y el Modelo
A continuación, deberás crear una tabla en tu base de datos que almacene los datos que deseas que aparezcan en las sugerencias de autocompletado. Por ejemplo, supongamos que deseas implementar autocompletado para nombres de usuarios. Ejecute los siguientes comandos en tu consola:
php artisan make:migration create_users_table --create=users
En el archivo de migración generado, añade los campos necesarios y luego ejecuta el comando:
php artisan migrate
Después de esto, crea un modelo para la tabla de usuarios:
php artisan make:model User
Crear la Ruta y el Controlador
Para manejar las solicitudes de autocompletado, crearás una ruta en web.php y un controlador. Añade la ruta:
Route::get('/autocomplete', [UserController::class, 'autocomplete'])->name('autocomplete');Luego, crea el controlador usando el siguiente comando y agrega el método autocomplete:
php artisan make:controller UserController
En el UserController, agrega el siguiente código:
public function autocomplete(Request $request)
{
$data = User::select("name")
->where("name", "LIKE", "%{$request->input('query')}%")
->get();
return response()->json($data);
}Este fragmento permite buscar usuarios cuyo nombre coincida con el texto ingresado en el campo de búsqueda.
Implementar el Autocomplete en la Vista
Finalmente, en tu vista Blade, puedes hacer uso de jQuery para implementar la funcionalidad de autocompletado. Aquí hay un ejemplo de cómo hacerlo:
<input type="text" id="search" placeholder="Buscar usuario...">
<script>
$(document).ready(function() {
$('#search').on('keyup', function() {
var query = $(this).val();
$.ajax({
url: "{{ route('autocomplete') }}",
type: "GET",
data: {'query': query},
success: function(data) {
var suggestions = [];
data.forEach(function(value) {
suggestions.push(value.name);
});
$('#search').autocomplete({
source: suggestions
});
}
});
});
});
</script>Con este código, al escribir en el campo de búsqueda, se enviará una solicitud AJAX que traerá las sugerencias de usuarios, y se mostrarán en un menú desplegable.
Conclusiones
Implementar el autocompletado AJAX en Laravel 11 con jQuery UI es un proceso sencillo que mejora notablemente la experiencia del usuario. Al seguir este tutorial, podrás proporcionar a tus usuarios una herramienta efectiva para encontrar información rápidamente.
Te invito a que sigas leyendo más noticias y tutoriales sobre desarrollo web en mi blog. ¡Siempre hay algo nuevo que aprender!
