23 mayo, 2020
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

Suscríbete a nuestro canal en Youtube
Suscríbirse
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
- Buscador ultrápido en Javascript
- Diseño del buscador en HTML y Bootstrap
- Creando el Array de Datos
- 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.
- Necesitamos rapidez en los resultados de búsqueda
- No emplearemos librerías adicionales
- Usaremos datos contenidos en un array asociativo de pares.
- Usaremos indexof para encontrar coincidencias
- Usaremos un campo input
- 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 13267 veces | 3 usuarios
Descarga del código fuente Javascript de Buscador en Javascript con array asociativos
Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.
Opciones de descarga
- Usuarios Registrados: Inicia sesión para descarga inmediata.
- Nuevos Usuarios: Regístrate y descarga.