Codice completo
Il filtro confronta il testo digitato con il contenuto di ogni elemento.
<input id="cerca" placeholder="Cerca linguaggio...">
<ul id="lista">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
<script>
const cerca = document.querySelector('#cerca');
const elementi = document.querySelectorAll('#lista li');
cerca.addEventListener('input', function() {
const testo = cerca.value.toLowerCase();
elementi.forEach(function(elemento) {
const contenuto = elemento.textContent.toLowerCase();
elemento.hidden = !contenuto.includes(testo);
});
});
</script>
Commento
- L'evento input parte mentre l'utente digita.
- toLowerCase() evita differenze tra maiuscole e minuscole.
- includes() controlla se una parola contiene il testo cercato.
Prova a modificarlo
Cambia nomi, testi e valori iniziali. Poi aggiungi una piccola regola CSS per rendere evidente lo stato dell'interfaccia.