Documentation (sur MDN)
La balise datalist ne contient que des balises option
C'est donc un conteneur de balises
La balise datalist doit contenir l'attribut : id.
La valeur de cet attribut (id) doit correspondre à celle de l'attribut list
d'une balise input
Exemple :
<input list="myList" /> <datalist id="myList"> <option value="accompagner"></option> <option value="accomplir"></option> <option value="accorder"></option> <option value="accrocher"></option> <option value="bâtir"></option> </datalist>
Utilisée sans lien avec la balise input, la balise datalist
n'affiche rien sur la page. Elle peut (donc) être placée n'importe où dans le code HTML.
Toutefois, logiquement, elle apparaît juste après la balise à laquelle elle est liée.
Le grand intérêt de <input list="myList" /> est qu'il suffit
de taper les premières lettres pour que la liste se réduise automatiquement.
Ce couple <input list> + <datalist> remplace donc
avantageusement celle utilisant la balise <select> (qui oblige
l'utilisateur à ouvrir la liste pour y choisir un élément)
Toutefois, ce type de liste déroulante est encore utile lorsqu'on autorise un choix multiple.
code de cette liste déroulante (via <select>)
<select> <option value="accompagner">accompagner</option> <option value="accomplir">accomplir</option> <option value="accorder">accorder</option> <option value="accrocher">accrocher</option> <option value="bâtir">bâtir</option> </select>
En pratique, lorsque la liste est longue, les <option> ne sont pas
codées en dur dans le fichier HTML, mais créées (en mémoire) via du code JS.
Exemple : Liste déroulante des 1360 mots les
plus courants de la langue française.
Cerise sur le gâteau, le chargement de la liste des options via du code JS ne doit plus
faire appel à une libraire, telle que w3.js.