L’autocomplétion est un schéma que tous les internautes connaissent. Lorsque vous effectuez une recherche, votre moteur de recherche vous suggère des termes. Lorsque vous tapez un nouveau message électronique, votre client de messagerie vous suggère des destinataires. Cependant, cette fonctionnalité n’était pas accessible aux développeurs web sans une quantité non négligeable de JavaScript. L’un des nouveaux éléments HTML5, le , apporte cette fonctionnalité d’autocomplétion au Web de manière native. Dans cet article, je vais décrire ce que sont les listes de données, quand il est approprié de les utiliser, leurs limites et ce qu’il faut faire pour les navigateurs qui ne les prennent pas en charge. Commençons.

Création de datalists

Pour montrer comment fonctionne une datalist, commençons par une entrée de texte traditionnelle :

1. <label for= »favorite_team »>Équipe favorite :</label>
2. <input type= »text » name= »team » id= »favorite_team »>

Ce champ demande à un utilisateur de fournir son équipe sportive favorite. Par défaut, l’utilisateur ne reçoit aucune aide supplémentaire pour remplir le champ. Mais en utilisant une datalist, vous pouvez fournir une liste d’options parmi lesquelles l’utilisateur peut choisir pour remplir le champ. Pour ce faire, définissez une datalist avec un élément option pour chaque suggestion :

1. <datalist>
2. <option>Detroit Lions</option>
3. <option>Detroit Pistons</option>

4. <option>Detroit Red Wings</option>
5. <option>Detroit Tigers</option>

< !- etc… ->

6. </datalist>

Pour lier une datalist à un élément d’entrée, donnez à l’élément d’entrée un attribut list et à la datalist un attribut id qui correspondent. Voici un exemple :

1. <label for= »favorite_team »>Équipe préférée :</label>
2. <input type= »text » name= »team » id= »favorite_team » list= »team_list »>
3. <datalist id= »team_list »>
4. <option>Detroit Lions</option>
5. <option>Detroit Pistons</option>
6. <option>Detroit Red Wings</option>
7. <option>Detroit Tigers</option>
8. < !- etc… ->
9. </datalist>

Notez que l’attribut list de l’entrée et l’attribut id de la datalist contiennent la même valeur, « team_list ». Cela fournit le lien entre les deux.

C’est tout. Aucun JavaScript n’est nécessaire pour faire fonctionner une datalist. La figure 1 montre ce que l’utilisateur verra dans les navigateurs compatibles après avoir tapé un D.


Figure 1. Affichage de la liste de données (en haut à gauche : Internet Explorer 10 ; en haut à droite : Firefox 18 ; en bas à gauche : Chrome 24 ; en bas à droite : Opera 12)

Note : Internet Explorer 10 et Opera ne demandent pas à l’utilisateur de taper un caractère avant de voir les suggestions, alors que Firefox et Chrome le font.

Les éléments optionnels peuvent également avoir un attribut de valeur. Cela est utile lorsqu’un utilisateur peut ne pas connaître le code associé à une option donnée. Prenons l’exemple suivant de la saisie d’un état américain state input:

1. <label for= »state »>State :</label>
2. <input type= »text » name= »state » id= »state » list= »state_list »>
3. <dataliste id= »state_list »>
4. <option value= »AL »>Alabama</option>
5. <option value= »AK »>Alaska</option>
6. <option value= »AZ »>Arizona</option>
7. <option value= »AR »>Arkansas</option>
8. < !- etc ->
9. </datalist>

Ici, l’utilisateur verra une liste de noms d’états complets, mais lorsqu’il fera une sélection, la saisie de texte sera remplie avec le code de l’état plutôt que le nom complet. Un exemple est présenté dans la Figure 2.


Figure 2. Sélection d’une option de liste de données avec une valeur correspondante (Firefox 18)

L’attribut autocomplete

Si les listes de données des Figure 1 et Figure 2 vous semblent familières, c’est parce que les navigateurs ont implémenté l’autocomplétion depuis longtemps. Tous les navigateurs ont un mécanisme de stockage des entrées d’un utilisateur qui sera utilisé pour l’autocomplétion plus tard.

Les auteurs peuvent utiliser l’attribut autocomplete pour contrôler si le navigateur doit tenter de compléter automatiquement les données de l’utilisateur. Les valeurs possibles sont présentées dans l’exemple suivant :

1. <form>
2. < !-
3. Si l’attribut autocomplete n’est pas spécifié, il hérite de la valeur
4. de son élément de formulaire parent. Si elle n’est pas spécifiée, la valeur par défaut de l’attribut autocomplete du formulaire
5. est « on ». Comme ni cette entrée ni son
6. form n’ont l’attribut spécifié, l’état « on » sera utilisé.
7. ->
8. <input type= »text » name= »firstName »>
9. < !-
10. L’état « on » indique que le navigateur peut se souvenir de la valeur pour une utilisation future
11. ainsi que suggérer des valeurs précédemment stockées.
12. ->
13. <input type= »text » name= »address » autocomplete= »on »>
14. < !-
15. L’état « off » indique au navigateur de ne pas stocker la valeur saisie pour
16. cette entrée ni de suggérer les valeurs précédemment saisies. Ceci devrait être
17. utilisé si les données sont sensibles ou si la valeur ne sera jamais réutilisée.
18. ->
19. <input type= »text » name= »secret » autocomplete= »off »>

.

20. </form>

Alors quelle est la différence entre l’attribut autocomplete et les datalists ? L’attribut autocomplete indique au navigateur s’il doit donner à un utilisateur des options à compléter en fonction de la saisie précédente et s’il doit stocker la valeur saisie pour une complétion ultérieure. Les datalistes sont des listes de suggestions fournies par les auteurs qui s’affichent toujours, quelle que soit la saisie précédente.

Une mise en garde : le fait de définir l’attribut autocomplete sur « off » empêche les datalistes de s’afficher dans Opera. Voici un exemple :

1. <!-
2. Cette datalist ne s’affichera jamais dans Opera car l’attribut autocomplete
3. est réglé sur « off ». Elle s’affichera dans tous les autres navigateurs qui la prennent en charge.
4. ->
5. <input type= »text » list= »pets » autocomplete= »off »>
6. <datalist id= »pets »>

.

7. <option>Cat</option>
8. <option>Dog</option>
9. <option>Hamster</option>
10. <option>Tortue</option>
11. </datalist>

Autres types de saisie

Alors que l’autocomplétion est traditionnellement associée à la saisie textuelle, les listes de données peuvent également être utilisées sur un certain nombre des nouveaux types de saisie HTML5. Prenons l’exemple du type de saisie de plage, qui permet la création d’un élément de formulaire de type curseur. En combinant cela avec une datalist, vous pouvez suggérer des points sur la plage à l’utilisateur.

Par exemple, l’entrée suivante demande à l’utilisateur de fournir un don entre 5 et 200 dollars.

1. <label for= »donation »>Montant du don (USD) :</label>
2. <input type= »range » name= »donation » id= »donation » list= »donation_list »
3. step= »5″ min= »5″ max= »200″>

.

4. <datalist id= »donation_list »>
5. <option></option>
6. <option></option>
7. <option></option>
8. <option></option>
9. </datalist>

La figure 3 et la figure 4 montrent l’affichage d’une entrée de plage dans Chrome 24 et Internet Explorer 10, respectivement.


Figure 3. Entrée de plage avec Datalist (Chrome 24)


Figure 4. Range Input with Datalist (Internet Explorer 10)

Vous pouvez voir que chaque navigateur affiche une coche pour chaque option de datalist fournie. De plus, Chrome accroche le curseur à ces valeurs prédéfinies lorsque l’utilisateur déplace le curseur près d’elles.

Malheureusement, Internet Explorer et Chrome sont les seuls navigateurs à prendre en charge les datalists sur les entrées de plage pour le moment. La figure 5 montre la prise en charge des datalists sur les types d’entrée courants dans les navigateurs modernes.


Figure 5. Prise en charge par les navigateurs des listes de données sur les types de saisie de formulaire

Quand utiliser une liste de données

Puisque les listes de données n’ont pas de mécanisme intégré pour exiger qu’un utilisateur sélectionne une option fournie, elles sont bien adaptées aux entrées qui peuvent accepter n’importe quelle valeur. L’exemple précédent de la fourniture d’une équipe sportive convient ici. Bien que la datalist ait suggéré des équipes, l’utilisateur était libre de saisir n’importe quelle valeur.

A l’inverse, l’exemple de l’État américain échoue à ce test car il existe un ensemble limité de valeurs valides que l’utilisateur doit fournir. Un tel cas d’utilisation est mieux traité par l’élément select car il force une sélection.

Une exception à cette règle concerne les entrées avec un grand nombre de sélections valides. Par exemple, considérez la liste déroulante traditionnelle des pays présentée à la figure 6.


Figure 6. Liste déroulante standard des pays

Cette liste gêne les utilisateurs en les obligeant à passer au crible des centaines d’options pour trouver celle qu’ils recherchent. Une fonction de complétion automatique convient bien à ce cas d’utilisation, car un utilisateur peut rapidement filtrer la liste en tapant un ou deux caractères.

Voici comment la sélection du pays peut être mise en œuvre avec une datalist :

1. <label for= »country »>Pays :</label>
2. <input type= »text » id= »country » list= »country_list »>
3. <dataliste id= »country_list »>
4. <option value= »AF »>Afghanistan</option>
5. <option value= »AX »>Åland Islands</option>
6. <option value= »AL »>Albania</option>
7. <option value= »DZ »>Algérie</option>
8. < !- more ->
9. </datalist>

La figure 7 montre ce que l’utilisateur verra après avoir tapé un U.


Figure 7. Une approche de liste de données pour le champ de formulaire du pays

Enforcer une valeur

Bien que les listes de données ne permettent pas nativement d’exiger qu’une option soit sélectionnée, vous pouvez facilement ajouter une validation qui le fait. Par exemple, le code suivant fait usage de l’API de validation des contraintes HTML5 pour ajouter une telle validation:

1. /// Trouver toutes les entrées sur le DOM qui sont liées à une datalist via leur attribut de liste.
2. var inputs = document.querySelectorAll(‘input’);
3. for (var i = 0 ; i < inputs.length ; i++) {
4. // Lorsque la valeur de l’entrée change…
5. Intrants.addEventListener(‘change’, function() {
6. var optionFound = false,
7. datalist = this.list;
8. // Déterminer si une option existe avec la valeur actuelle de l’entrée.
9. for (var j = 0 ; j < datalist.options.length ; j++) {
10. si (this.value == datalist.options.value) {
11. optionFound = true;
12. break;
13. }
14. }
15. // utiliser la fonction setCustomValidity de l’API de validation
16. // pour fournir un retour utilisateur si la valeur n’existe pas dans la datalist
17. si (optionFound) {
18. cette.setCustomValidity(« );
19. } else {
20. this.setCustomValidity(‘Please select a valid value.’);
21. }
22. });
23. }

L’API de validation des contraintes est implémentée dans tous les navigateurs qui supportent les datalists, donc si la datalist fonctionne, la validation devrait également fonctionner. Maintenant, lorsque l’utilisateur tente de soumettre un formulaire dont l’entrée comporte une datalist (et qu’il n’a pas sélectionné d’option), il verra l’erreur illustrée à la Figure 8.


Figure 8. Erreur API de validation des contraintes (Internet Explorer 10)

Il est important de noter que l’API de validation des contraintes ne supprime pas la nécessité d’une validation côté serveur. Les utilisateurs travaillant avec des navigateurs plus anciens ne disposeront pas de l’API de validation des contraintes, et les utilisateurs malveillants peuvent facilement subvertir les scripts côté client.

Bien que cette approche fonctionne dans les navigateurs modernes, elle présente une interface utilisateur inutilisable pour les utilisateurs exécutant des navigateurs dépourvus de support. Les utilisateurs sont informés qu’ils doivent sélectionner une valeur valide, mais si leur navigateur ne prend pas en charge les listes de données, ils ne peuvent pas voir les options. Par conséquent, si vous prévoyez d’utiliser cette approche, il est essentiel de fournir une interface utilisateur qui fonctionne dans tous les navigateurs. Cela peut être accompli en détectant si le navigateur prend en charge les datalists, puis en effectuant un polyfilling approprié.

Navigateurs non compatibles

Au moment de la rédaction de cet article, les datalists pour les entrées de texte sont prises en charge par Internet Explorer 10, Firefox 4+, Chrome 20+ et Opera, ce qui laisse malheureusement de côté un grand nombre d’utilisateurs.

Comme pour de nombreuses nouvelles fonctionnalités HTML5, pour la plupart des cas d’utilisation, aucun travail supplémentaire ne doit être effectué dans les navigateurs qui ne prennent pas en charge les datalists. Par défaut, la liste des options que vous fournissez ne sont que des suggestions ; par conséquent, les utilisateurs dont les navigateurs ne prennent pas en charge devront simplement remplir le champ de texte sans aucune suggestion.

Cependant, certaines options de repli peuvent être utilisées pour offrir une expérience plus complète aux utilisateurs exécutant des navigateurs non pris en charge.

Retour à un contenu HTML alternatif

Une option, popularisée par Jeremy Keith, consiste à tirer parti du fait que les navigateurs qui ne prennent pas en charge l’élément datalist afficheront quand même les éléments enfants à l’utilisateur. Ce qui suit montre comment l’exemple de datalist de pays peut être modifié et basculer vers l’utilisation de <select>:

1. <label for= »country »>Pays :</label>
2. <datalist id= »country_list »>
3. <select name= »country »>
4. Div> <option value= »AF »>Afghanistan</option>
5. <option value= »AX »>ÎlesÅland</option>
6. <option value= »AL »>Albanie</option>
7. <option value= »DZ »>Algérie</option>
8. <option value= »AS »>American Samoa</option>
9. < !- more ->
10. </select>
11. Si autre, veuillez préciser :
12. </datalist>
13. <input type= »text » name= »country » id= »country » list= »country_list »>

L’interface utilisateur présentée aux utilisateurs des navigateurs qui prennent en charge les listes de données ne changera pas, mais les utilisateurs travaillant avec des navigateurs sans support voient maintenant un élément de sélection avec les options de pays et une zone de texte qu’ils peuvent utiliser pour entrer n’importe quelle valeur. C’est ce que montre la figure 9.


Figure 9 : Un élément de repli Select pour les datalistes (Internet Explorer 9)

Polyfilling

Une fonctionnalité que l’élément de repli Select ne fournit pas est le comportement d’autocomplétion que les datalistes offrent nativement. Si cela est important pour les listes de données que vous ajoutez, une deuxième option de repli consiste à polyfilliser une implémentation de liste de données.

Pour commencer, vous devez d’abord déterminer si le navigateur de l’utilisateur prend en charge les listes de données. La populaire bibliothèque de détection de fonctionnalités Modernizr fournit un tel test, comme indiqué ici:

1. if (Modernizr.input.list) {
2. //Le navigateur prend en charge l’attribut liste et les datalistes.
3. } else {
4. //Le navigateur ne prend en charge ni l’attribut liste ni les datalists.
5. }
6. }

En utilisant cette approche, vous pouvez maintenant polyfill une implémentation de datalist pour les utilisateurs dans les navigateurs non supportés. Bien que plusieurs polyfill soient disponibles pour les datalists, je préfère utiliser le widget autocomplete de jQuery UI. Le code suivant montre une implémentation polyfill:

1. var datalist,
2. listAttribute,
3. options = ;
4. /// Si le navigateur ne supporte pas l’attribut list…
5. if ( !Modernizr.input.list) {
6. // Pour chaque entrée de texte avec un attribut liste…
7. $(‘input’).each(function() {
8. // Trouver l’id de la liste de données sur l’entrée
9. // En utilisant ceci, trouver la liste de données qui correspond à l’entrée.
10. listAttribute = $(this).attr(‘list’);
11. datalist = $(‘#’ + listAttribute);
12. // Si l’entrée a un élément datalist correspondant…
13. si (datalist.length > 0) {
14. options = ;
15. // Construire la liste des options à passer au widget de complétion automatique.
16. datalist.find(‘option’).each(function() {
17. options.push({ label : this.innerHTML, value : this.value });
18. );
19. // Transformer l’entrée en un widget autocomplete jQuery UI.
20. $(this).autocomplete({source : options });
21. }
22. });
23. // Supprime toutes les listes de données du DOM afin qu’elles ne s’affichent pas.
24. $(‘datalist’).remove();
25. }

La figure 10 montre l’affichage de l’exemple de liste de pays dans Safari avec le polyfill autocomplete de jQuery UI.


Figure 10. Country Datalist Polyfilled Using jQuery UI’s Autocomplete Widget(Safari)

Vous avez peut-être remarqué que, par défaut, le widget d’autocomplétion de jQuery UI fait correspondre les caractères n’importe où dans les options, alors que les datalists ne font correspondre les options qu’au début de la chaîne. Contrairement à la datalist native, le widget autocomplete vous permet de personnaliser cela pour faire correspondre les options comme vous le souhaitez.

L’exemple suivant montre comment vous pouvez construire une fonctionnalité d’autocomplétion qui fait correspondre les options uniquement au début de la chaîne :

1. <input type= »text » id= »autocomplete »>
2. <script>
3. var options = ;
4. $(‘#autocomplete’).autocomplete({
5. // req contiendra un objet avec une propriété « term » qui contient la valeur
6. // actuellement dans l’entrée de texte. responseFn devrait être invoqué avec les options
7. // à afficher à l’utilisateur.
8. source : function (req, responseFn) {
9. // Escape any RegExp meaningful characters such as « . », or « ^ » from the
10. // keyed term.
11. var term = $.ui.autocomplete.escapeRegex(req.term),
12. // ‘^’ est le caractère RegExp à faire correspondre au début de la chaîne.
13. // ‘i’ indique au RegExp de faire une correspondance insensible à la casse.
14. matcher = new RegExp(‘^’ + term, ‘i’),
15. // Boucle sur les options et sélectionne uniquement celles qui correspondent au RegExp.
16. matchs = $.grep(options, function (item) {
17. return matcher.test(item);
18. });
19. // Retourne les options correspondantes.
20. réponseFn(matches);
21. }
22. }) ;
23. </script>

Anciennes versions d’Internet Explorer

Pour qu’un polyfill quelconque de l’élément datalist fonctionne dans les anciennes versions d’Internet Explorer, vous devez suivre deux étapes supplémentaires.

Les éléments d’option

La première est qu’Internet Explorer version 9 et antérieures exigent toutes que les éléments d’option soient des enfants immédiats des éléments select. S’ils ne le sont pas, ces versions ne les reconnaissent pas et ils ne seront pas visibles par le polyfill.

Heureusement, il est facile de contourner ce problème. En utilisant des commentaires conditionnels, vous pouvez placer un élément de sélection autour des options uniquement pour ces versions d’Internet Explorer. Référez-vous à cet exemple :

1. <datalist>
2. <><select><<>
3. <option>Apple</option>
4. <option>Banane</option>
5. <option>Cherry</option>
6. < !- etc ->
7. <><select><<>
8. </datalist>

Internet Explorer version 9 et antérieure détectera désormais les options de manière appropriée. Internet Explorer 10 ne sera pas affecté puisque les commentaires conditionnels ont été supprimés de l’analyseur syntaxique dans Internet Explorer 10. Tous les autres navigateurs ignoreront également les commentaires.

HTML5 Shiv

Dans Internet Explorer version 8 et antérieure, les éléments inconnus ne peuvent pas contenir d’enfants. Par conséquent, même si les éléments d’option d’une liste de données se trouvent dans des éléments de sélection, ils ne seront toujours pas reconnus.

Heureusement, il existe également un correctif facile pour ce problème. La populaire bibliothèque HTML5 Shiv permet aux éléments inconnus d’Internet Explorer 6-8 d’avoir des enfants. Cette shiv est incluse par défaut dans Modernizr ; assurez-vous simplement que la case « html5shiv » est cochée lorsque vous configurez votre téléchargement.

Limitations des datalistes

Bien que les datalistes soient parfaites pour ajouter des suggestions aux entrées de texte, elles souffrent d’un manque de capacités de personnalisation dont de nombreuses applications Web modernes ont besoin. Par exemple, vous ne pouvez pas faire ce qui suit avec les datalists :

• Utiliser le CSS pour modifier son affichage ou l’affichage de ses options.
• Contrôler le positionnement de la liste.
• Contrôler le nombre de caractères tapés avant que le navigateur affiche les résultats à l’utilisateur.
• Contrôler ce qui est considéré comme une correspondance (sensibilité à la casse, correspondance au début de la chaîne de caractères par rapport à n’importe où, et ainsi de suite).
• Lier l’entrée à une source de données côté serveur.

Cela signifie que si vous avez besoin de l’une de ces fonctionnalités, vous devez vous pencher sur une solution d’autocomplétion plus robuste. Le widget autocomplete de jQuery UI offre la possibilité de faire tout cela et plus encore. Le widget de complétion automatique prend également en charge tous les navigateurs jusqu’à Internet Explorer 7 sans nécessiter de polyfill. Pour plus d’informations sur le widget de complétion automatique, consultez ses démonstrations et la documentation de l’API. (Le widget autocomplétion ne gère que les entrées basées sur du texte, il ne pourra donc pas vous aider pour certains types d’entrées plus spécialisés comme la plage et la couleur.)

Wrapping Up

Lesatalistes fournissent un moyen rapide et natif d’afficher des suggestions d’entrée à l’utilisateur. Comme les options ne sont que des suggestions, pour de nombreuses situations, il n’est pas nécessaire de fournir une solution de repli pour les navigateurs non pris en charge ; les utilisateurs de ces navigateurs ne verront tout simplement pas les suggestions.

Pour les situations où vous souhaitez effectivement fournir une datalist fonctionnelle à tous les utilisateurs, vous pouvez détecter la prise en charge et polyfill la fonctionnalité pour les navigateurs qui n’ont pas de prise en charge.

Bien que les datalists soient excellentes pour offrir des suggestions, elles sont limitées dans la fonctionnalité qu’elles fournissent. Si vous avez besoin d’une solution d’autocomplétion plus robuste, le widget d’autocomplétion de jQuery UI est un bon point de départ.

La liste de données est un outil très utile.