Offrire un'esperienza utente fluida e immediata è ormai fondamentale nello sviluppo web. Uno degli elementi più apprezzati dagli utenti è la possibilità di filtrare contenuti in tempo reale, senza dover ricaricare la pagina o attendere lunghe elaborazioni. È proprio qui che entra in gioco un sistema di filtri dinamici, capace di aggiornare istantaneamente una lista in base a ciò che viene digitato o selezionato.
Implementare un filtro dinamico in JavaScript
In questo tutorial vedremo come creare da zero un sistema di ricerca in tempo reale utilizzando HTML, CSS e JavaScript, una soluzione leggera ma estremamente efficace. Questo tipo di funzionalità è perfetto per liste di prodotti, contatti, articoli o qualsiasi insieme di dati che necessiti di essere consultato rapidamente, migliorando notevolmente usabilità e interazione.
Quali linguaggi serviranno per creare il filtro dinamico?
Prima di entrare nel codice, è importante capire quali strumenti utilizzeremo e quale sarà il risultato finale. Per costruire il nostro sistema di filtri dinamici useremo HTML per la struttura della lista e del campo di ricerca, CSS per rendere l'interfaccia pulita e leggibile e JavaScript per gestire la logica di filtraggio in tempo reale.
L'obiettivo sarà quello di creare un input di ricerca che, mentre l'utente digita, filtra automaticamente gli elementi di una lista mostrando solo quelli che corrispondono al testo inserito. Il tutto avverrà senza ricaricare la pagina, garantendo, come anticipato, un'esperienza fluida e immediata. Nell'anteprima finale avremo quindi una lista di elementi (ad esempio nomi o prodotti) e una barra di ricerca che aggiorna i risultati istantaneamente, rendendo la navigazione molto più veloce ed intuitiva.
<!doctype html>
<html lang="it">
<head>
<meta charset="UTF-8" />
<title>Filtro Lista in Tempo Reale</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h2>Ricerca nella lista</h2>
<!-- Campo di input -->
<input type="text" id="searchInput" placeholder="Cerca..." />
<!-- Lista elementi -->
<ul id="itemList">
<li>Ananas</li>
<li>Arancia</li>
<li>Banana</li>
<li>Fragola</li>
<li>Kiwi</li>
<li>Mango</li>
<li>Mela</li>
<li>Pera</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>In questo snippet abbiamo creato una struttura molto semplice ma funzionale: un campo di input con ID searchInput che ci servirà per intercettare ciò che l'utente digita, e una lista con ID itemList contenente diversi elementi. Questi ID saranno fondamentali nella parte JavaScript, perché ci permetteranno di collegare il comportamento dinamico agli elementi della pagina.
.container {
background: #fff;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
width: 300px;
}
h2 {
margin-bottom: 15px;
text-align: center;
}
#searchInput {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 14px;
}
#itemList {
list-style: none;
padding: 0;
margin: 0;
}
#itemList li {
padding: 10px;
border-bottom: 1px solid #eee;
}
#itemList li:last-child {
border-bottom: none;
}In questo codice abbiamo centrato il contenuto nella pagina e creato un piccolo "box" con ombra e bordi arrotondati per migliorare l'aspetto. L'input è stato reso più usabile con padding e bordi morbidi, mentre la lista è stata semplificata eliminando i punti elenco e aggiungendo separatori tra gli elementi. Questo styling, pur essendo minimale, contribuisce a rendere l'esperienza utente più chiara e professionale.
const searchInput = document.getElementById("searchInput");
const items = document.querySelectorAll("#itemList li");
searchInput.addEventListener("keyup", function () {
const filter = searchInput.value.toLowerCase();
items.forEach(function (item) {
const text = item.textContent.toLowerCase();
if (text.includes(filter)) {
item.style.display = "";
} else {
item.style.display = "none";
}
});
});In questo snippet abbiamo prima selezionato l'input e tutti gli elementi della lista. Successivamente, abbiamo aggiunto un event listener sull'evento keyup, che si attiva ogni volta che l'utente digita qualcosa.
Ad ogni input, il testo inserito viene trasformato in minuscolo per evitare problemi di maiuscole/minuscole, e confrontato con il contenuto di ogni elemento della lista. Se il testo dell'elemento include il valore cercato, rimane visibile. In caso contrario viene nascosto impostando display: none.
Questo approccio è semplice ma estremamente efficace, e rappresenta una delle tecniche più utilizzate per creare ricerche istantanee leggere e performanti direttamente lato client.
Analisi del risultato e commento
Una volta completati tutti i passaggi, il risultato finale è un sistema di filtro dinamico semplice ma estremamente efficace. Digitando all'interno del campo di ricerca, la lista si aggiorna in tempo reale mostrando solo gli elementi che corrispondono al testo inserito. Questo avviene senza alcun refresh della pagina, rendendo l'interazione immediata e molto più piacevole per l'utente.
Dal punto di vista pratico, questo tipo di soluzione è ideale per progetti come elenchi di prodotti, rubriche contatti, archivi di articoli o qualsiasi contenuto che necessiti di essere consultato rapidamente. Inoltre, il sistema è facilmente estendibile: ad esempio, è possibile aggiungere più campi di filtro, integrare categorie oppure collegarlo a dati provenienti da API.
In sintesi, con poche righe di codice abbiamo realizzato una funzionalità altamente utile e professionale, dimostrando quanto JavaScript possa migliorare concretamente l'esperienza utente anche in progetti semplici.
Conclusione e considerazioni
In conclusione, creare un sistema di filtro dinamico con ricerca in tempo reale è un'ottima soluzione per migliorare l'usabilità di qualsiasi sito web. Grazie all'integrazione di HTML, CSS e JavaScript, è possibile ottenere un risultato rapido, leggero e altamente interattivo senza dover ricorrere a librerie esterne o soluzioni complesse.
Questo tipo di funzionalità rende la navigazione più intuitiva e trasmette anche una sensazione di modernità e cura nei dettagli, aspetti sempre più importanti nell'esperienza utente. Una volta compreso il meccanismo di base, potrai facilmente adattarlo a progetti più avanzati, arricchendolo con animazioni, filtri multipli o integrazioni con database.
