Datalist per il completamento automatico
Suggerire valori di input con l’elemento datalist
Datalist per il completamento automatico è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
Che cos'è datalist?
L'elemento <datalist> fornisce un elenco di suggerimenti predefiniti per un <input>:
<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->datalist rispetto a select
Differenza principale tra <datalist> e <select>:
- datalist — testo libero + suggerimenti, l'utente può digitare qualsiasi cosa
- select — scelta vincolata, l'utente deve selezionare un'opzione dall'elenco
Usare datalist quando si desidera suggerire dei valori senza limitare l'input.
Collegare datalist a input
L'attributo list su <input> deve corrispondere all'id di <datalist>:
<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
</datalist>datalist con diversi tipi di input
<datalist> funziona con molti tipi di input:
<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">
<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
<option value="0"> <option value="25">
<option value="50"> <option value="75"> <option value="100">
</datalist>
<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
<option value="#0070f3">
<option value="#e86f00">
</datalist>label dell'opzione in datalist
Le opzioni in datalist possono avere un'etichetta visibile e un valore inviato:
<datalist id="countries">
<option value="US">United States</option>
<option value="GB">United Kingdom</option>
<option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
value is submitted when the option is selected -->Filtraggio dei suggerimenti
Il browser filtra i suggerimenti mentre l'utente digita:
- L'algoritmo di corrispondenza varia a seconda del browser
- Alcuni browser cercano la corrispondenza dall'inizio, altri in qualsiasi punto della stringa
- Non è possibile controllare il comportamento di filtraggio del browser
- Per un filtraggio personalizzato, creare un componente di completamento automatico personalizzato con ARIA
datalist dinamico con JavaScript
Aggiornare dinamicamente le opzioni di datalist:
<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>
<script>
document.getElementById('search-input').addEventListener('input', async function() {
const query = this.value;
const res = await fetch(`/api/search?q=${query}`);
const items = await res.json();
const dl = document.getElementById('suggestions');
dl.innerHTML = items.map(item =>
`<option value="${item.name}">`
).join('');
});
</script>Accessibilità di datalist
Considerazioni sull'accessibilità di datalist:
- Gli screen reader annunciano i suggerimenti come una listbox
- Gli utenti possono spostarsi tra i suggerimenti con i tasti freccia
- L'input accetta ancora testo libero — assicurarsi che la validazione lo gestisca
Note sul supporto dei browser
Il supporto dei browser per datalist è buono, ma presenta alcune particolarità:
- Chrome, Edge, Firefox: supporto completo
- Safari: supportato a partire da Safari 12.1+
- Browser mobili: la maggior parte mostra i suggerimenti, ma l'interfaccia varia
- Testare sempre nei browser di destinazione prima di fare affidamento su datalist
Quando non usare datalist
Datalist non è ideale quando:
- È necessaria una validazione rigorosa, cioè l'utente deve scegliere dall'elenco
- È necessario uno stile personalizzato per le opzioni, perché l'aspetto è controllato dal browser
- È necessario raggruppare le opzioni, perché optgroup non è supportato in datalist
In questi casi, usare un componente di completamento automatico personalizzato con ARIA role="combobox".
datalist rispetto all'input di ricerca
Confronto tra datalist e un input di ricerca con completamento automatico:
<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
<option value="HTML tutorial">
<option value="HTML forms">
<option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->Verifica rapida
Come si collega un input al relativo elemento datalist?
Riepilogo: datalist
Elementi essenziali di datalist:
<datalist id>+<input list>— collegati tramite id/list corrispondenti- L'utente può digitare liberamente o scegliere un suggerimento
- Usare
<select>quando la scelta deve essere vincolata - Funziona con i tipi di input text, range, color e altri
- I suggerimenti vengono filtrati mentre l'utente digita
Domande Frequenti
La lezione «Datalist per il completamento automatico» è gratuita?
Sì — il testo completo di «Datalist per il completamento automatico» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «Datalist per il completamento automatico»?
Suggerire valori di input con l’elemento datalist Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Datalist per il completamento automatico»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Menu a discesa select e option
- Textarea per l’input su più righe
- Gruppi di caselle di controllo e pulsanti di opzione
- Datalist per il completamento automatico