liste de données ajoutée à Chrome Canary

Remplir un formulaire est parfois fastidieux. Il est important de donner aux utilisateurs des choix multiples tout en leur permettant de taper librement. Grâce à l'élément datalist (qui vient d'arriver sur Chrome Canary (M20), c'est un jeu d'enfant.

En utilisant datalist, votre application peut définir une liste de suggestions de résultats parmi lesquelles les utilisateurs doivent sélectionner. Ils peuvent sélectionner une option dans la liste ou saisir un texte au format libre.

Démonstration en direct:

Les options peuvent être associées à 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 disponible pour les utilisateurs dans les dernières versions de Firefox, d'Opera et d'Internet Explorer à partir de la version 10. Vous n'avez donc pas à vous soucier trop de la compatibilité. Toutefois, pour vous assurer qu'elle fonctionne sur 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 intercepte à la fois "fruit_sel" et "fruit" comme paramètres de requête.