Buscador en tiempo real en Laravel y Javascript

¿Cómo programar un buscador en tiempo real en Laravel y JS?

VIDEO ¿Cómo programar un buscador en tiempo real en Laravel y JS?

Buscador en tiempo real en Laravel y Javascript

¿Cómo programar un buscador en tiempo real en Laravel y JS?

DESCARGAR

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

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.

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. 

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

<?php
Auth::routes();
// RUTA QUE MUESTRA LOS PRIMEROS REGISTROS
Route::get('nombres', 'ScrollController@index');
// RUTA PARA SCROLL INFINITO DINÁMICO
Route::get('nombres/paginacion', 'ScrollController@paginacion');
// RUTA PARA EL BUSCADOR EN TIEMPO REAL
Route::get('nombres/buscador','ScrollController@buscador');

Creando el método en el controlador ScrollController

Para ello abrimos el archivo ScrollController y agregamos un método llamado buscador. La particularidad de ésta consulta es que nos debe retornar un conjunto de registros que coincidan con la variable enviada; específicamente la cadena enviada que son letras debe al menos coincidir con las primeras letras del campo nombre de nuestra tabla Nombres,

El script para el método es el siguiente:

public function buscador(Request $request){
        $nombres    =   Nombres::where("nombre",'like',$request->texto."%")->take(10)->get();
        return view("nombres.paginas",compact("nombres"));        
    }

Analizando, este método tiene como parámetros el objeto request el cual debe contener la cadena enviada desde la vista, es decir el valor del input, podemos deducir que hace uso like para comparar los primeros caracteres o letras, solicitamos 10 registros y todo lo almacenamos en el objeto $nombres. Y por último retornamos la vista que habiamos creado anteriormente con el objeto nombres.

Modificando la Vista welcome

La modificamos para agregar la estructura html del buscador  que consiste básicamente en una caja de texto o input identificada con el id texto y una capa o div identificado con el atributo id="resultados" , esta caja permitirá contener y visualizar los nombres; podemos agregar estilos css ya preconfigurados de Bootstrap que nos puedan ayudar a maquetar nuestra aplicación.

Veamos las etiquetas html necesarias:

@extends('layouts.app')
@section('content')
<div class="container">
<!-- html agregado-->
    <div class="col-8">
        <div class="input-group">
            <input type="text" class="form-control" id="texto" placeholder="Ingrese nombre">
            <div class="input-group-append"><span class="input-group-text">Buscar</span></div>
        </div>
        <div id="resultados" class="bg-light border"></div>
    </div>
<!-- fin del html agregado-->
    <div class="col-8" id="contenedor">
        @include('nombres.paginas')
    </div>
    <div id="cargando" hidden><h1>CARGANDO...</h1></div>
</div>

También podemos agregar algunos estilos predefinidos como class="p-2 border-bottom" a la vista nombres/paginas.blade.php que visualiza los nombres de la siguiente forma y debería quedar así:

@if (count($nombres))
    @foreach ($nombres as $item)          
        <p class="p-2 border-bottom">{{$item->id .' - '. $item->nombre}}</p>
    @endforeach             
@endif

 

Y ahora si la funcionalidad con Javascript puro.

Casi se puede decir que sigue la misma lógica del scroll infinito, con ligeras variantes, primero veamos el código javascript y analicemos.

window.addEventListener('load',function(){
        document.getElementById("texto").addEventListener("keyup", () => {
            if((document.getElementById("texto").value.length)>=1)
                fetch(`/nombres/buscador?texto=${document.getElementById("texto").value}`,{ method:'get' })
                .then(response  =>  response.text() )
                .then(html      =>  {   document.getElementById("resultados").innerHTML = html  })
            else
                document.getElementById("resultados").innerHTML = ""
        })
    });    

Claramente vemos que usamos los listener de JS nativos, en la segunda línea accedemos al input mediante su atributo id texto para escuchar si se lanza el evento keyup del input, luego preguntanos si el valor ingresado es mayor o igual a 1.

Si es asi procemos a invocar la API fetch donde armamos la ruta que solicitará la petición al servidor  enviado el valor en la variable texto, definimos que se mediante el método get de transporte de datos; luego recibimos la respuesta y la retornamos en texto, volvemos a recibirla en formato html para poder reemplazarla por la anterior vista en la capa con el id resultados.

Si no, limpiamos el html generado dinámicamente con los resultados.

Este script los agregamos dentro de las etiquetas script declaradas anteriormente, puede ser al inicio o al final del contenido existente.

Al final concluimos

La implementación de este tipo de funcionalidad no requiere de librerías adicionales, es suficiente con Javascript, claro ello depende de la envergadura de la aplicación a desarrollarse. Entonces tenemos un buscador en Laravel usando Bootstrap y Javascript con pocas líneas de código.


¿Quieres descargar el código fuente Buscador en tiempo real en Laravel y Javascript?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter
ó copia el link

Visitado 3421 veces | Publicado hace 8 meses

Más códigos de programación en LARAVEL.

Ver scripts de LARAVEL

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020