Si quieres implementar búsqueda en vivo con Laravel usando AJAX, puedes usar jQuery AJAX para hacer que la búsqueda sea dinámica sin necesidad de recargar la página.
¿Cómo crear un buscador en vivo con Laravel y AJAX?
Para crear un buscador en vivo con laravel debemos de cumplir estos pasos que detallamos a continuación.
- Crear la Ruta en Laravel
- Crear el Controlador
- Crear la Vista Blade
- Ejecutar la Aplicación
¿Cómo Funciona el buscador en tiempo real?
- Cuando el usuario escribe en el campo de búsqueda, AJAX envía la consulta al servidor.
- Laravel busca los resultados en la base de datos y devuelve los datos en formato JSON.
- jQuery actualiza los resultados en la página en tiempo real.
🛠 Pasos para implementar AJAX Live Search en Laravel
1. Crear la Ruta en Laravel
Define una ruta en web.php para manejar las peticiones AJAX:
use App\Http\Controllers\SearchController;
use Illuminate\Support\Facades\Route;
Route::get('/search', [SearchController::class, 'search'])->name('search');2. Crear el Controlador
Ejecuta el siguiente comando para generar un controlador:
php artisan make:controller SearchControllerLuego, en app/Http/Controllers/SearchController.php, agrega el siguiente código:
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Post; // Reemplázalo con tu modelo
class SearchController extends Controller
{
public function search(Request $request)
{
$query = $request->input('query');
// Buscar en la base de datos
$results = Post::where('title', 'LIKE', "%{$query}%")
->orWhere('content', 'LIKE', "%{$query}%")
->get();
return response()->json($results);
}
}3. Crear la Vista Blade
En resources/views/search.blade.php, crea el campo de búsqueda y el espacio donde se mostrarán los resultados.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Búsqueda en Vivo con AJAX - Laravel Baulphp.com</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h2>Buscar Posts</h2>
<input type="text" id="search" placeholder="Escribe para buscar...">
<div id="search-results"></div>
<script>
$(document).ready(function () {
$('#search').on('keyup', function () {
let query = $(this).val();
if (query.length > 2) {
$.ajax({
url: "{{ route('search') }}",
type: "GET",
data: { query: query },
success: function (data) {
let results = '';
data.forEach(post => {
results += `<p>${post.title}</p>`;
});
$('#search-results').html(results);
}
});
} else {
$('#search-results').html('');
}
});
});
</script>
</body>
</html>4. Ejecutar la Aplicación
Asegúrate de que tu servidor de Laravel esté en ejecución:
php artisan serveLuego accede a http://127.0.0.1:8000/search y prueba la búsqueda en vivo.
¡Ahora tienes una búsqueda en vivo con AJAX en Laravel simple y sencillo!
