Inicio » Blog » Javascript

23 mayo, 2020

Buscador en Javascript con array asociativos

Para implementar un buscador con Javascript podemos usar indexof, un campo input y datos contenidos en array asociativos para mostrar resultados en Html

Buscador en Javascript con array asociativos

Suscríbete a nuestro canal en Youtube

Suscríbirse

 

Y la pregunta es ¿Cómo programar un buscador en Javascript?, antes de responder esta interrogante. debemos tener claro porque nos aventuramos a implementar un buscador con Javascript.

Contenido

  1. Buscador ultrápido en Javascript 
  2. Diseño del buscador en HTML y Bootstrap
  3. Creando el Array de Datos
  4. Creando la función de búsqueda JS

 

Buscador ultrápido en Javascript 

La principal razón radica en la rapidez  en los resultados de búsqueda, puesto que al cargar la página debe llenarse la variable array con los datos, esto para que el buscador no realice peticiones Ajax  o Fetch que ralentizan un poco la interacción del usuario cuando usa la caja de búsqueda.

  1. Necesitamos rapidez en los resultados de búsqueda
  2. No emplearemos librerías adicionales
  3. Usaremos datos contenidos en un array asociativo de pares.
  4. Usaremos indexof para encontrar coincidencias
  5. Usaremos un campo input 
  6. Usaremos el evento keyup

Sin más, veamos el código:

Diseño del buscador en HTML y Bootstrap

<div class="container">
        <div class="row justify-content-center">
            <div class="col-sm-6">
                <div class="card mt-5 bg-primary">
                    <div class="card-body">
                        <input type="search" id="buscar-pal" onkeyup="autocompletado()" class="form-control" placeholder="Buscar">
                        <div>
                            <ul id="demo" class="list-group"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div> 

 

Creando el Array de Datos

Array en Laravel usando Blade

El array asociativo se crea con una consulta blade de Laravel. Obviamente Ud. pueden reemplazarla javascript puro o php. Y el script es el siguiente:

@foreach ($categoria as $item)
 contenido.push({nombre:"{{$item->nombre}}",slug:"{{$item->slug}}"})
@endforeach

Array con Javascript

Y debería quedar asi los datos parseados

const contenido = [
                    {nombre:"Javascript",slug:"javascript"},
                    {nombre:"React JS",slug:"react-js"},
                    {nombre:"HTML",slug:"html"},
                    {nombre:"CSS",slug:"css"},
                    {nombre:"MySql",slug:"mysql"},
                    {nombre:"PHP",slug:"php"},
                ]

 

Creando la función de búsqueda JS

La función integra el array asociativo. Vemos que usamos innerHtml para renderizar el html con los resultados

function autocompletado () {            
            var pal = document.getElementById("buscar-pal").value;
            document.getElementById("demo").innerHTML = '';
            if(pal.length>0){                
                var html='';
                contenido.forEach(function(element) {
                    let posicion = element.nombre.toLowerCase().indexOf(pal.toLowerCase());
                    if (posicion !== -1)
                        html += "<li class='list-group-item'><a href='/"+element.slug+"'>"+element.nombre+"</a></li>";
                })
                document.getElementById("demo").innerHTML = html ;
            }
}

 

 


Leido 12126 veces

Descarga el código fuente Javascript

Recurso descargado 392 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Aprende más sobre Javascript

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