Buscador en Javascript
¿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.
Contenido
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.
Sin más, veamos el código:
<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>
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
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"},
]
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
Redactado por: , Leido 8028 veces
© Todos los derechos reservados Codea App | Cursos de programación | 2020 - 2022