Datalist HTML5: come usarlo

L'elemento <datalist> offre suggerimenti predefiniti per un campo input pur lasciando l'utente libero di inserire valori personalizzati. È una combinazione di select e input, perfetta quando vuoi guidare l'utente con opzioni comuni senza vincolarlo. Disponibile in HTML5 senza JavaScript, supporta tutti i browser moderni e migliora la UX di compilazione.

Sintassi base

Si associa un'input a una datalist tramite l'attributo list che fa riferimento all'id della datalist. La datalist contiene una serie di <option> con il valore suggerito. L'input mostra automaticamente i suggerimenti durante la digitazione, filtrandoli, ma accetta anche valori non presenti nell'elenco. Questa è la differenza fondamentale rispetto al tag select che invece limita le scelte.

Differenze con select

Select impone la scelta tra le opzioni elencate; datalist suggerisce ma non vincola, lasciando libertà all'utente di scrivere anche valori personalizzati. Datalist supporta filtraggio incrementale durante la digitazione, è ideale per ricerche autocompletate e per indicare valori "tipici" senza obbligo. Inoltre l'aspetto visivo è quello di un campo input standard, non di un dropdown.

Datalist popolata dinamicamente

Per autocomplete server-side: ascolta l'evento input sul campo, fai fetch all'endpoint di ricerca, e aggiorna le option della datalist con i risultati. Esempio tipico: ricerca città mentre l'utente digita. Debouncia le richieste con setTimeout (300-500ms) per evitare di sovraccaricare il server. Cache localmente i risultati per query già viste. Il browser gestisce la visualizzazione del dropdown automaticamente, devi solo fornire le option giuste. Riduce drasticamente la complessità rispetto a librerie autocomplete custom.

Combinazione con input numerici

Datalist non è limitata a input testuali. Funziona anche con type="number" suggerendo valori comuni (es. età predefinite, quantità tipiche), type="date" con date suggerite, type="color" con palette aziendale, type="range" che mostra tick marks. La combinazione amplia notevolmente le possibilità: suggerire senza vincolare lascia all'utente libertà ma con guida. È particolarmente utile in form di configurazione, dove vuoi guidare verso scelte comuni ma consentire personalizzazioni avanzate quando richiesto dall'utilizzo specifico.

Datalist e UX

Datalist offre UX particolare: i suggerimenti appaiono come dropdown filtrato durante la digitazione. L'utente può cliccare per selezionare o continuare a digitare un valore custom. Differenza chiave con combobox tradizionali: nessun bottone freccia per espandere tutta la lista esplicitamente. Questo può confondere utenti abituati al pattern select+text. Considera se la libertà di input è davvero un valore: se gli utenti devono scegliere dall'elenco, select è meglio. Datalist eccelle per scenari come ricerca con suggerimenti, dove l'apertura della tastiera mobile è naturale e i suggerimenti accelerano l'inserimento.

Limiti e workaround

Datalist ha limiti noti: nessun supporto per option groups (optgroup), nessuna icona o markup ricco nelle option (solo testo), filtering algorithm fixed nel browser non personalizzabile, comportamento UX leggermente diverso tra Chrome, Firefox e Safari. Per casi complessi (option con immagini, descrizioni, ricerca fuzzy avanzata) preferisci librerie come Awesomplete, Combobox di react-aria, Headless UI. Per casi semplici (lista di città, marche, categorie) datalist resta la soluzione più leggera, accessibile out-of-the-box e con zero dipendenze esterne.

Tool e librerie alternative

Per casi che superano le capability di datalist, valuta librerie specializzate. Awesomplete è una libreria vanilla JS leggerissima (~3KB) con UI raffinata. Choices.js offre dropdown customizzabile con tag input, multi-select, ricerca. Combobox di react-aria fornisce implementazione accessibile per React. Headless UI per Tailwind ha combobox completo. Differenza chiave: queste librerie offrono customization di stile, comportamento e UX che datalist nativo non permette. Trade-off: peso del bundle e dipendenza da una libreria esterna. Per casi semplici, datalist nativo continua a essere ottimo: zero dipendenze, accessibile, compatibile cross-browser e con perfetta integrazione mobile nativa.

Procedura passo-passo

1. Crea un <input list="suggestionsId"> con il riferimento alla datalist.
2. Sotto l'input definisci <datalist id="suggestionsId">.
3. All'interno aggiungi una serie di <option value="..."> per ogni suggerimento.
4. Opzionalmente fornisci una label visibile con <option value="VAL">Etichetta</option>.
5. Per autocomplete da database popola dinamicamente la datalist via JavaScript.
6. Combina con type="email" o type="url" per validation aggiuntiva.
7. Testa il comportamento su mobile dove l'interfaccia può differire.

Errori comuni e come risolverli

• id non corrispondente: list dell'input deve coincidere esattamente con id della datalist; verifica i typo.
• Datalist vuota: senza option non offre suggerimenti; controlla che le opzioni siano renderizzate.
• Confusione con select: se vuoi limitare le scelte usa select, non datalist.
• Lista troppo lunga: oltre 100 opzioni l'UX peggiora; filtra lato server o categorizza.
• Mobile UX differente: alcuni browser mobile mostrano l'elenco in modo diverso; testa sempre.

Domande frequenti

D: Datalist forza l'utente a scegliere dall'elenco?
R: No, suggerisce ma non vincola. Per vincolare usa select o validation custom.

D: Posso popolarla dinamicamente?
R: Sì, modificando il DOM via JavaScript man mano che servono nuove opzioni.

D: Funziona con type="date" o "color"?
R: Sì, datalist può suggerire date o colori predefiniti su input compatibili.

D: Supporta gruppi come optgroup?
R: No, datalist non ha equivalente di optgroup. Per categorie usa più datalist separate.

Hai bisogno di aiuto?

Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.