21 octubre, 2024

Buscador en tiempo real 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

Suscríbirse

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

  1. Declarar las rutas necesarias para el buscador incluyendo la ruta para Fetch
  2. Implementar un método en el controlador que retorne el texto encontrado a una vista
  3. Implemenación de una vista para mostrar los resultados
  4. 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


Laravel Página Web Administrable

USD 17.00

Descarga del código fuente

Laravel Página Web Administrable
ReactJS y Laravel Directorio de Empresas

USD 47.00

Descarga del código fuente

ReactJS y Laravel Directorio de Empresas
Curso de Laravel básico

USD 17.00

Descarga del código fuente

Curso de Laravel básico

Más tutoriales de Laravel

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024