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

 

Visitado 547 veces | Publicado hace 8 meses