Buscador en Javascript con array asociativos

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

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

 

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.

  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

Si más veamos el código:

HTML

<div class="col-sm-12">
          <input type="text" id="buscar-pal" onkeyup="autocompletado()" class="form-control" placeholder="Buscar">
          <div>
                <ul id="demo"></ul>
          </div>
</div> 

JAVASCRIPT

Y el script es el siguiente:

El array asociativo se crea con una consulta blade de Laravel. Obviamente Ud. pueden reemplazarla javascript puro o php.

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

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

function autocompletado () {
            document.getElementById("demo").innerHTML = '';
            var preguntas = new Array()
            @foreach ($categoria as $item)
            preguntas.push({nombre:"{{$item->nombre}}",slug:"{{$item->slug}}"})
            @endforeach
            var pal = document.getElementById("buscar-pal").value;
            var html='';
            preguntas.forEach(function(element) {
              let posicion = element.nombre.toLowerCase().indexOf(pal.toLowerCase());
              if (posicion !== -1)
                html += "<li><a href='/{{$categoria->slug}}/"+element.slug+"'>"+element.nombre+"</a></li>";
            })
            document.getElementById("demo").innerHTML = html ;
}

 

No hay descargable

Redactado por: , Leido 6600 veces

CURSOS DE PROGRAMACIÓN CON PROYECTOS

© Todos los derechos reservados Codea App FullStack | Cursos de programación avanzados | 2020 - 2021