Buscador en Javascript con array asociativos

Buscador en Javascript con array asociativos

Buscador en Javascript

Buscador en Javascript con array asociativos

¿Cómo programar un buscador en Javascript usando indexof?

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

VER DEMO

 

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 ;
            }
}

 

 

Descarga código fuente 129

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 8028 veces

Codea App
Codea App FullStack

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

You Fb Tik Pin

© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022