Buscador en Javascript con array asociativos

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