¿Cómo crear un buscador en Laravel y Javascript?

Programar un buscador en tiempo real con el Framework Laravel con la API nativa de Javascript para extraer datos de forma asíncrona, conocida con fetch. Con autocompletado

Suscríbete a nuestro canal en Youtube

Un buscador en tiempo real es una funcionalidad que permite ingresar texto a través de una caja o input, esta información se envia al servidor donde es procesada, este proceso nos retorna la respuesta de la consulta exitosa o no, la cual se debe mostrar en la vista de la aplicación.

Pasos para programar un buscador Laravel con autocompletado

Declarar las rutas necesarias para el buscador incluyendo la ruta para Fetch
Implementar un método en el controlador que retorne el texto encontrado a una vista
Implemenación de una vista para mostrar los resultados
Un poco de Javascript Fetch para procesar en tiempo real la petición.

Parece que fuera complejo desarrollar esta funcionalidad, pero usando Laravel y un poco de Javascript lograremos realizarla con facilidad. Se cree que utilizando Librerías adicionales como Axios.js, Jquery o Vue.js se obtiene mejor perfomance. Pero está aplicación es sencilla y básica por tanto, pienso que no es necesario cargar alguna librería adicional, suficiente con Bootstrap que al usarla ya ralentiza nuestra aplicación web, si no prueben con un test de velocidad de Google Speed.

Ahora, pongamos en contexto esta aplicación, vamos a usar la configuración de la anterior publicación, te recomiendo revisarlo en el siguiente enlace de ¿Cómo programar un scroll infinito? donde ya tenemos instalado y configurado Laravel además del modelo Nombres y sus 1000 registros; entonces aprovecharemos lo que ya esta implementado para continuar con el desarrollo de ésta publicación.

Empecemos a programar el Buscador

Abrimos el archivo de rutas que se encuentra en Routes/web.php este archivo ya contiene dos rutas a la cual agregaremos una más, ¿Por qué? pues porque necesitamos crear una ruta que será usada para realizar las peticiones asíncronas.

Pais.php

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Pais extends Model
{
    use HasFactory;
    protected $guarded = [];
    public $timestamps = false;
}

Entonces, en web.php nuestro código debe quedar de la siguiente forma:

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BuscadorController;

Route::get('/', function () {
    return view('welcome');
});
Route::get('buscador',[BuscadorController::class,'index']);
Route::post('buscador',[BuscadorController::class,'buscar']);

BuscadorController.php

namespace App\Http\Controllers;
use App\Models\Pais;
use Illuminate\Http\Request;
class BuscadorController extends Controller
{
    public function index(){
      return view("welcome");
    }
    public function buscar(Request $request){
        $response= [
            "success"=>false,
            "message"=>"Hubo un error"
        ];
        if($request->ajax()){
            $data = Pais::where("nombre","like",$request->texto."%")->take(10)->get();
            $response= [
                "success"=>true,
                "message"=>"Consulta Correcta",
                "data"=>$data
            ];
        }
        return response()->json($response);
    }
}

Welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>Laravel</title>
    </head>
    <body>
       <form action="" method="post">
        <input type="search" name="texto" id="buscar">
       </form>
       <div id="resultado"></div>
       <script>
        window.addEventListener("load",function(){
            buscar.addEventListener("keyup",(e)=>{           
                fetch(`/buscador`,{
                    method:'post',
                    body:JSON.stringify({texto : buscar.value}),
                    headers:{
                        "Content-Type":"application/json",
                        "X-Requested-With": "XMLHttpRequest",
                        "X-CSRF-Token":document.head.querySelector("[name~=csrf-token][content]").content
                    }
                })
                .then(response=>{
                    return response.json()
                })
                .then(data=>{
                    var html = ""
                    if(data.success){
                        html += "<ul>"
                        for (var i in data.data) {
                            html += "<li>"+data.data[i].nombre+"</li>"
                        }
                        html += "</ul>"
                    }else{
                        html += "No existen resultados"
                    }
                    resultado.innerHTML = html                  
                })
            })
        })
       </script>
    </body>
</html>

Leido 27837 veces | 1 usuarios

Código fuente no disponible.

Compartir link del tutorial con tus amigos