En este ejercicio de JavaScript de buscador de productos filtrarás una lista local mientras la persona escribe.
Enunciado
Crea un campo de búsqueda y cuatro productos. Ignora mayúsculas y espacios exteriores. Muestra el número de coincidencias y un mensaje cuando no haya resultados.
Solución comentada
Prueba el fragmento dentro del cuerpo de un documento HTML. Incluye la etiqueta viewport si vas a comprobar el resultado en móvil.
<label for="buscar">Buscar producto</label>
<input id="buscar" type="search">
<p id="estado" role="status"></p>
<ul id="productos"></ul>
<script>
const productos = ["Cuaderno azul", "Lápiz negro", "Mochila", "Cuaderno rojo"];
const campo = document.querySelector("#buscar");
const lista = document.querySelector("#productos");
const estado = document.querySelector("#estado");
function mostrar() {
const consulta = campo.value.trim().toLocaleLowerCase("es");
const visibles = productos.filter(nombre =>
nombre.toLocaleLowerCase("es").includes(consulta)
);
const elementos = visibles.map(nombre => {
const li = document.createElement("li");
li.textContent = nombre;
return li;
});
lista.replaceChildren(...elementos);
estado.textContent = visibles.length
? "Resultados: " + visibles.length : "No se encontraron productos.";
}
campo.addEventListener("input", mostrar);
mostrar();
</script>La consulta vacía coincide con todos los productos. Filter selecciona coincidencias y textContent coloca cada nombre como texto. El ejercicio conserva los acentos: «lapiz» no coincide con «Lápiz» en esta versión.
Cómo comprobar tu solución
- Escribe « CUADERNO » y verifica que aparecen dos resultados.
- Borra la consulta y comprueba que reaparece la lista completa.
- Busca una palabra que no exista y comprueba el estado vacío.
Reto adicional
Haz que «lapiz» encuentre «Lápiz». Compara la consulta y el nombre mediante una función común y conserva la ortografía original al mostrar resultados.
Repasa los conceptos en el tutorial de MasterCodePro.
