Barra de búsqueda por lista
Publicado por Leidy (1 intervención) el 05/04/2023 21:13:51
Hola que tal, estoy comenzando en esto de la programación, estoy buscando ejemplos de barras de búsqueda en un indice principal, ya conseguí que me busque cualquier texto de varias listas pero, como puedo hacer que si busco una lista me muestre todo el contenido de esa lista ?? alguien me puede ayudar ?
Ejemplo: el siguiente código lo hice en js y cuando en el input busco mora, me muestra la palabra frutas y la mora, o si busco tomate me aparece la palabra verduras y Tomate. Pero si busco Verduras solo me aparece la palabra verduras sin el contenido de esa lista
Asi tengo las listas en HTML
Ejemplo: el siguiente código lo hice en js y cuando en el input busco mora, me muestra la palabra frutas y la mora, o si busco tomate me aparece la palabra verduras y Tomate. Pero si busco Verduras solo me aparece la palabra verduras sin el contenido de esa lista
1
2
3
4
5
6
7
8
9
10
11
/*Ejemplo de buscador */document.addEventListener("keyup", e => {
if (e.target.matches("#buscador")) {
document.querySelectorAll(".articulo").forEach(fruta=>{
fruta.textContent.toLowerCase().includes(e.target.value.toLowerCase())
? fruta.classList.remove("filtro")
: fruta.classList.add("filtro")
})
}})
Asi tengo las listas en HTML
<div>
<input type="text" name="buscador" id="buscador" placeholder="Buscar...">
<ul>
<li class="articulo"><h4><a style="color: black">Frutas</a></h4>
<ul>
<li class="articulo">Valora esta pregunta
0
