Buscador en Javascript con array asociativos

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

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

 

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

 

Comparte el código!...talvez tu amigo lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 547 veces | Publicado hace 8 meses

Curso Laravel 8 Página Web 100% Administrable

Mira el temario del curso en el siguiente link

VER EL CURSO

CÓDIGO FUENTE JAVASCRIPT

Logo Codea App

Develop your code

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

You Fb Tik Pin

© Todos los derechos reservados CODEA APP | Cursos de programación avanzados con proyectos reales | 2020 - 2021