Remplir des formulaires peut parfois sembler fastidieux. Il est important de proposer aux utilisateurs plusieurs choix, tout en leur permettant de saisir du texte librement. L'élément datalist (qui vient d'arriver dans Chrome Canary (M20)) permet de le faire facilement.
datalist permet à votre application de définir une liste de résultats suggérés parmi lesquels les utilisateurs peuvent choisir. Ils peuvent sélectionner une option dans la liste ou saisir du texte libre.
Vous pouvez associer des options à un datalist en spécifiant son id dans l'attribut list d'un élément input:
<input type="text" value="" list="fruits" />
<datalist id="fruits">
<option value="Apple"></option>
<option value="Orange"></option>
<option value="Peach"></option>
</datalist>
datalist est largement disponible sur les dernières versions de Firefox, d'Opera et d'Internet Explorer après la version 10. Vous n'avez donc pas à vous soucier trop de la compatibilité. Toutefois, si vous voulez vous assurer qu'elle fonctionne dans tous les navigateurs, procédez comme suit:
<datalist id="fruits">
Pick your favorite fruit
<select name="fruit_sel">
<option value="Apple">Apple</option>
<option value="Orange">Orange</option>
<option value="Peach">Peach</option>
</select>
or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />
Si datalist est disponible dans votre navigateur, tous les éléments sous datalist, à l'exception des éléments option, seront masqués. Si vous utilisez ce mécanisme de remplacement, assurez-vous que votre serveur récupère à la fois "fruit_sel" et "fruit" comme paramètres de requête.