Inicio » Blog » Laravel

1 agosto, 2019

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 26655 veces

Compartir link del tutorial con tus amigos


Laravel 9 Página Web para Negocio Laravel 9 Página Web para Negocio

Curso Laravel 9 Avanzado Desarrollo Web Administrable para negocio

Descarga del código fuente

USD 10.00

Laravel 11 Página Web Administrable Laravel 11 Página Web Administrable

Curso Laravel 11 Desarrollo de una Página Web Administrable

Descarga del código fuente

USD 37.00

ReactJS y Laravel Directorio de Empresas ReactJS y Laravel Directorio de Empresas

Curso ReactJS y Laravel desarrollo fullstack directorio empresarial

Descarga del código fuente

USD 47.00

Aprende más sobre Laravel

Cursos de programación

Codea Codea App

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

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023