Filtro con debounce per elenchi grandi
Ricerca che attende una breve pausa nella digitazione prima di elaborare il filtro.
Quando si usa
Quando il filtro deve analizzare molti elementi oppure avviare una richiesta al server e non vuoi eseguire un'operazione a ogni singolo tasto.
Perché si usa
Il debounce limita il numero di esecuzioni, migliora le prestazioni e riduce le richieste inutili.
Vantaggi principali
- Soluzione riutilizzabile e adattabile
- Codice privo di dipendenze esterne
- Struttura commentabile e integrabile nel progetto
Anteprima del risultato
Il filtro con debounce evita troppe elaborazioni mentre l'utente digita, aggiornando i risultati dopo una breve pausa.
Codice completo
Studia il flusso prima di copiarlo e provalo in un ambiente separato. Adatta sempre nomi, selettori, percorsi e controlli al progetto reale.
<input id="ricerca" type="search" placeholder="Cerca...">
<ul id="elenco"><li>Accessibilità</li><li>JavaScript</li><li>Database</li></ul>
<script>
const campo = document.getElementById('ricerca');
const righe = [...document.querySelectorAll('#elenco li')];
function debounce(funzione, attesa=300){
let timer;
return (...argomenti) => {
clearTimeout(timer);
timer = setTimeout(() => funzione(...argomenti), attesa);
};
}
const filtra = debounce(evento => {
const valore = evento.target.value.toLowerCase().trim();
righe.forEach(riga => riga.hidden = !riga.textContent.toLowerCase().includes(valore));
}, 250);
campo.addEventListener('input', filtra);
</script>Da personalizzare: Tempo di attesa, selettori e funzione eseguita dopo la pausa.
Errore da evitare: Non impostare un ritardo troppo lungo: la ricerca sembrerebbe lenta e poco reattiva.