Ricerca live in un elenco
Nasconde gli elementi che non corrispondono alla ricerca.
Quando si usa
Per cataloghi brevi, FAQ, elenchi di articoli o pagine indice già caricate nel browser.
Perché si usa
L'utente vede subito i risultati senza ricaricare la pagina o inviare un modulo.
Vantaggi principali
- Risposta immediata
- Ricerca senza server
- Codice adattabile alle card
Anteprima del risultato
La ricerca live filtra l'elenco mentre l'utente digita, rendendo più veloce trovare una voce.
- WEB-LAB
- WEB-TOOLS
- CODE-SNIPPETS
Codice completo
Puoi copiare il frammento e inserirlo in una pagina di prova. Prima della pubblicazione sostituisci i dati dimostrativi con quelli reali.
<input type="search" id="filtro" placeholder="Cerca...">
<ul id="elenco">
<li data-search="html struttura pagina">HTML</li>
<li data-search="css stile colori">CSS</li>
<li data-search="javascript interattività">JavaScript</li>
</ul>
<script>
document.getElementById('filtro').addEventListener('input', function(){
const parola = this.value.toLowerCase().trim();
document.querySelectorAll('#elenco li').forEach(function(voce){
voce.hidden = !voce.dataset.search.includes(parola);
});
});
</script>Da personalizzare: Modifica il selettore degli elementi e i dati inseriti in data-search.
Errore da evitare: Con migliaia di elementi è preferibile effettuare la ricerca sul server o nel database.