Tagul <datalist> conține un set de elemente <option> care reprezintă opțiuni predefinite și recomandate pentru un câmp de introducere <input>. Spre deosebire de un meniu clasic <select> (care forțează utilizatorul să aleagă doar din variantele existente), <datalist> oferă o experiență hibridă: utilizatorul primește sugestii pe măsură ce tastează, dar poate introduce oricând o valoare complet liberă.
Exemplu: Câmp de căutare cu sugestii de orașe din România
<label for="oras-destinatie">Alege sau tastează orașul de livrare:</label>
<!-- Legătura se face prin atributul list="id-datalist" -->
<input type="text" id="oras-destinatie" name="oras" list="lista-orase" placeholder="Tastează un oraș..." autocomplete="off">
<datalist id="lista-orase">
<option value="București">Capitala României</option>
<option value="Cluj-Napoca">Județul Cluj</option>
<option value="Timișoara">Județul Timiș</option>
<option value="Iași">Județul Iași</option>
<option value="Brașov">Județul Brașov</option>
<option value="Constanța">Județul Constanța</option>
</datalist>Avantaje Majore față de Plugin-urile JavaScript (Select2 / Autocomplete)
| Criteriu | Nativ <datalist> | Soluții JavaScript externe |
|---|---|---|
| Impact pe performanță | 0 KB fișiere externe, randare instantanee pe firul principal. | 50-150 KB de biblioteci JS și fișiere CSS suplimentare. |
| Experiență mobilă | Se integrează nativ cu tastatura virtuală a sistemului de operare (iOS, Android). | Dropdown-uri customizate care adesea suferă de bug-uri de poziționare sau zoom. |
| Accesibilitate | Accesibil automat tastaturii și screen reader-elor. | Necesită configurare complexă de atribute ARIA (aria-autocomplete, aria-expanded). |