Contrôles de saisie semi-automatique avec le datalist HTML5

Dans ce tutoriel, nous allons prendre une plongée profonde dans l'élément HTML5

Les plats clés

• L'élément HTML5 `
• Contrairement à ``, `` est plus pratique pour gérer un grand nombre d'options et permet aux utilisateurs de saisir des valeurs personnalisées non répertoriées dans les options prédéfinies.
• La prise en charge du navigateur pour `
• L'élément `
• Les améliorations telles que l'AJAX peuvent être intégrées à `

Quel est le problème avec ?

HTML5 Les contrôles sont idéaux lorsque vous souhaitez que l'utilisateur choisisse parmi une petite gamme d'options. Ils sont moins pratiques quand:

• Il existe de nombreuses options, telles que les pays ou les titres d'emploi
• L'utilisateur souhaite entrer sa propre option qui n'est pas sur la liste

La solution évidente est un contrôle de la saisie semi-automatique. Cela permet à l'utilisateur de saisir quelques caractères, ce qui limite les options disponibles pour une sélection plus rapide.

va sauter au bon emplacement lorsque vous commencez à taper, mais ce n'est pas toujours évident. Il ne fonctionnera pas sur tous les appareils (tels que les écrans tactiles), et il se réinitialise dans un deuxième ou deux.

Les développeurs se tournent souvent vers l'une des nombreuses solutions alimentées par JavaScript, mais un contrôle de saisie semi-automatique personnalisé n'est pas toujours nécessaire. L'élément HTML5

Choisir votre pays dans une liste contenant plus de 200 options est un candidat idéal pour un contrôle de la saisie semi-automatique. Définissez un

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Åland Islands<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Albania<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Algeria<span><span></span>></span>
</span>  <span><span><span><option>></option></span>American Samoa<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Andorra<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Angola<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Anguilla<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Antarctica<span><span></span>></span>
</span>  ...etc...
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span>

L'ID du DATAALIST peut ensuite être référencé par un attribut de liste dans n'importe quel champ :

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

Confusetment, il est préférable de définir AutoChandPlelet = "OFF". Cela garantit que l'utilisateur est montré des valeurs dans le

Le résultat:

Il s'agit du rendu par défaut dans Microsoft Edge. D'autres applications implémentent des fonctionnalités similaires, mais le look diffère d'une plateforme et des navigateurs.

Options

L'utilisation de l'étiquette comme enfant en texte d'une est commune:

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Åland Islands<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Albania<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Algeria<span><span></span>></span>
</span>  <span><span><span><option>></option></span>American Samoa<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Andorra<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Angola<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Anguilla<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Antarctica<span><span></span>></span>
</span>  ...etc...
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span>

L'utilisation d'un attribut de valeur produit des résultats identiques:

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

Remarque: La fermeture /> Slash est facultative dans HTML5, bien qu'elle puisse aider à empêcher les erreurs de codage.

Vous pouvez également définir une valeur selon une étiquette choisie en utilisant l'un des formats suivants.

Option 1:

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>label one<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label two<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label three<span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Option 2:

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option> value<span>="label one"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label two"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label three"</span> /></option></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Dans les deux cas, le champ de saisie est défini sur 1, 2 ou 3 lorsqu'une option valide est choisie, mais l'interface utilisateur varie à l'autre des navigateurs:

• Chrome affiche une liste avec la valeur et l'étiquette. Seule la valeur reste une fois qu'une option est choisie.
• Firefox affiche une liste avec l'étiquette uniquement. Il passe à la valeur une fois qu'une option est choisie.
• Le bord montre la valeur uniquement.

L'exemple de codePen suivant montre toutes les variations:

Voir le stylo
HTML5

Les implémentations évolueront mais, pour l'instant, je vous conseille de ne pas utiliser de valeur et d'étiquette car il est susceptible de confondre les utilisateurs. (Une solution de contournement est discutée ci-dessous.)

L'élément

Il existe plusieurs notes de mise en œuvre, mais elles n'affecteront pas la plupart des utilisations. Le pire qui pourrait arriver est qu'un champ revient à une entrée de texte standard.

Si vous devez absolument prendre en charge IE9 et ci-dessous, il existe un motif de repli qui utilise un standard en conjonction avec une entrée de texte lorsque le

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Åland Islands<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Albania<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Algeria<span><span></span>></span>
</span>  <span><span><span><option>></option></span>American Samoa<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Andorra<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Angola<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Anguilla<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Antarctica<span><span></span>></span>
</span>  ...etc...
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span>

Voir le stylo
HTML5

Dans les navigateurs modernes, les éléments font partie de l'étiquette

Dans IE9 et ci-dessous, les champs d'entrée (très longs) et le texte sont actifs:

Les deux valeurs pourraient être saisies dans les anciens IES. Votre application doit soit:

• décider lequel est le plus valide, ou
• Utilisez une petite fonction JavaScript pour en réinitialiser l'une lorsque l'autre est modifié

Utilisation de

Les navigateurs à base de chrome peuvent également appliquer des valeurs

1. une entrée avec le type de "date". L'utilisateur peut choisir parmi une gamme d'options définies comme des valeurs Yyyy-mm-dd mais présentées dans son format local.

2. une entrée avec le type de "couleur". L'utilisateur peut choisir parmi une sélection d'options de couleurs définies comme des valeurs hexagonales à six chiffres (les valeurs à trois chiffres ne fonctionnent pas).

3. une entrée avec un type de "plage". Le curseur montre les marques de tiques, bien que cela ne limite pas quelle valeur peut être saisie.

Voir le stylo
HTML5

Si vous avez déjà eu du mal à styliser une boîte , … vous avez eu la tâche facile!

Un peut être stylisé comme normal, mais un

J'espère que cette situation s'améliore, mais pour l'instant, une solution est proposée chez MDN qui:

1. remplace le comportement du navigateur par défaut
2. traite efficacement le
3. reproduit toutes les fonctionnalités de la saisie semi-automatique dans JavaScript

Je l'ai amélioré davantage et le code est disponible sur GitHub. Pour l'utiliser, chargez le script n'importe où dans votre page HTML en tant que module ES6. L'URL CDN JSDelivr peut être utilisée:

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Åland Islands<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Albania<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Algeria<span><span></span>></span>
</span>  <span><span><span><option>></option></span>American Samoa<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Andorra<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Angola<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Anguilla<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Antarctica<span><span></span>></span>
</span>  ...etc...
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span>

ou vous pouvez l'installer avec NPM si vous utilisez un bundler:

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

Vos éléments

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>label one<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label two<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label three<span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Remarque: ne peut pas être utilisé, car il se traduit par un élément vide qui ne peut pas être stylé!

CSS peut ensuite être ajouté pour styliser certains ou tous les éléments et . Par exemple:

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option> value<span>="label one"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label two"</span> /></option></span>
</span>  <span><span><span><option> value<span>="label three"</span> /></option></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Exemple:

Voir le stylo
HTML5

Le style fonctionne, mais cela vaut-il l'effort? Je soupçonne pas…

• La réimplémentation du clavier standard, de la souris et des commandes tactiles du navigateur avec une accessibilité raisonnable est difficile. L'exemple de MDN ne prend pas en charge les événements du clavier et, bien que j'essayais de l'améliorer, il y aura inévitablement des problèmes sur certains appareils.
• Vous comptez sur 200 lignes de JavaScript pour résoudre un problème CSS. Il diminue à 1,5 Ko, mais pourrait introduire des problèmes de performances si vous avez besoin de nombreux éléments longs
• Si JavaScript est une exigence, serait-il préférable d'utiliser un composant JavaScript plus joli, plus cohérent et testé au combat?

Le contrôle retombe à un HTML5

Création d'un

En présumant que votre concepteur est heureux d'accepter les différences de style de navigateur, il est possible d'améliorer les fonctionnalités standard

1. Implémentez la validation facultative qui n'accepte qu'une valeur connue dans le
2. Définir Éléments des données renvoyées par les appels AJAX pour rechercher les API.
3. Définissez d'autres valeurs de champ lorsqu'une option est choisie. Par exemple, la sélection des «États-Unis d'Amérique» définit «nous» dans une entrée cachée.

Le code doit principalement redéfinir des éléments, bien qu'il existe plusieurs considérations de codage:

• Une demande API AJAX ne devrait se produire qu'une fois qu'un nombre minimum de caractères a été entré.
• Les événements de frappe doivent être Debounced . C'est-à-dire qu'un appel ajax n'est déclenché qu'une fois que l'utilisateur a cessé de taper pendant au moins une demi-seconde.
• Les résultats de la requête doivent être mis en cache afin qu'il ne soit pas nécessaire de répéter ou d'analyser les appels identiques.
• Les requêtes inutiles doivent être évitées. Par exemple, entrer «Un» renvoie 12 pays. Il n'est pas nécessaire de faire des appels AJAX davantage pour "unité" ou "United" parce que toutes les options résultantes sont contenues dans les 12 résultats originaux.

J'ai créé un composant Web standard pour cela, et le code est disponible sur GitHub. L'exemple de codepen ci-dessous vous permet de sélectionner un pays valide après avoir entré au moins deux caractères. Un artiste musical Assomple automatique renvoie ensuite des artistes qui sont originaires de ce pays avec des noms correspondant à la chaîne de recherche:

Voir le stylo
HTML5

• L'API de recherche du pays est fournie par RestCountries.eu.
• L'API de recherche d'artiste musical est fournie par musicbrainz.org.

Pour l'utiliser dans votre propre application, chargez le script n'importe où dans votre page HTML en tant que module ES6. L'URL CDN JSDelivr peut être utilisée:

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Åland Islands<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Albania<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Algeria<span><span></span>></span>
</span>  <span><span><span><option>></option></span>American Samoa<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Andorra<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Angola<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Anguilla<span><span></span>></span>
</span>  <span><span><span><option>></option></span>Antarctica<span><span></span>></span>
</span>  ...etc...
<span><span><span></span>></span>
</span></span></span></span></span></span></span></span></span></span></span>

ou vous pouvez l'installer avec NPM si vous utilisez un bundler:

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

Créez un élément avec un enfant à utiliser comme champ de données de données. Par exemple, la recherche de pays utilise ceci:

<span><span><span><datalist> id<span>="mylist"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>label one<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label two<span><span></span>></span>
</span>  <span><span><span><option>></option></span>label three<span><span></span>></span>
</span><span><span><span></span>></span>
</span></span></span></span></span>

Attributs d'élément:

attribut Description API L'URL de l'API REST (requise) respectdata Le nom de la propriété contenant un tableau de résultat d'objets dans l'API retourné JSON (non requis si seuls les résultats sont retournés) Nom de résultat Le nom de la propriété dans chaque objet de résultat qui correspond à l'entrée de recherche et est utilisé pour les éléments de Datalist (requis) requête Le nombre minimum de caractères à saisir avant qu'une recherche ne soit déclenchée (par défaut: 1) inputdelay Le temps minimum pour attendre en millisecondes entre les déempes de touches avant qu'une recherche ne se produise (Débouncement par défaut: 300) optionmax Le nombre maximum d'options de saisie semi-automatique à afficher (par défaut: 20) valide Si définissez, ce message d'erreur est affiché lorsqu'une valeur non valide est sélectionnée

L'URL de repos doit contenir au moins un identifiant $ {id}, qui est remplacé par la valeur définie dans le avec cet ID. Dans l'exemple ci-dessus, $ {country} dans l'URL de l'API fait référence à la valeur de l'enfant , qui a un identifiant de "pays". L'URL utilisera normalement l'entrée de l'enfant, mais tous les autres champs de la page peuvent être référencés.

L'API RestCounntries.eu renvoie un seul objet ou un tableau d'objets contenant des données de pays. Par exemple:

<span><span><span><datalist> id<span>="countrydata"</span>></datalist></span>
</span>  <span><span><span><option>></option></span>Afghanistan<span><span></span></span></span></span></span>

> >Åland Islands> >Albania> >Algeria> >American Samoa> >Andorra> >Angola> >Anguilla> >Antarctica> ...etc... >

L'attribut ResultimeData n'a pas besoin d'être défini car il s'agit des seules données renvoyées (il n'y a pas d'objet wrapper). L'attribut ResultName doit être défini sur "Nom" car cette propriété est utilisée pour remplir les éléments Datalist .

D'autres champs peuvent être remplis automatiquement lorsqu'une option est choisie. Les entrées suivantes reçoivent les données de propriété "Alpha2Code" et "Région" car un attribut Data-Autofill a été défini:

<span><span><span><label> for<span>="country"</span>></label></span>country<span><span></span>></span>
</span>
<span><span><span><input> type<span>="text"</span>
</span></span><span>  <span>list<span>="countrydata"</span>
</span></span><span>  <span>id<span>="country"</span> name<span>="country"</span>
</span></span><span>  <span>size<span>="50"</span>
</span></span><span>  <span>autocomplete<span>="off"</span> /></span>
</span></span></span>

Comment fonctionne Datalist-Ajax

Vous pouvez ignorer cette section si vous préférez ne pas lire 230 lignes de code et garder la magie vivante!

Le code crée initialement un nouveau

RunQuery () construit l'URL de l'API à partir des données sous la forme et fait un appel AJAX à l'aide de l'API Fetch. Le JSON retourné est analysé, puis un fragment DOM réutilisable contenant des éléments est construit et placé dans un cache.

Une fonction DatalistUpdate () est appelée, qui met à jour le

Un gestionnaire d'événements de modification surveille également le , qui est déclenché lorsque la mise au point est déplacée du champ et que la valeur a été modifiée. La fonction vérifie que la valeur correspond à une option connue et, si nécessaire, utilise l'API de validation de contrainte pour afficher le message d'erreur fourni dans l'attribut valide.

En supposant qu'une option valide a été choisie, la fonction de gestionnaire de modifications remplit tous les champs avec des attributs de données-autofill correspondants. Une référence aux champs de remplissage automatique est conservée afin qu'elles puissent être réinitialisées si une option non valide est ensuite saisie.

Notez que l'ombre Dom est pas utilisé. Cela garantit que les éléments (et

Dunkin ’

Le HTML5

Tout le code et les exemples indiqués dans ce tutoriel peuvent être adoptés pour vos propres projets.

FAQ sur les commandes d'observance automatique légères avec le datalist HTML5

quel est l'élément de données HTML5 et comment fonctionne-t-il?

L'élément de données HTML5 est une liste d'options prédéfinie pour un élément d'entrée. Il fournit une fonctionnalité «Assumestre automatique» sur les éléments de formulaire. L'élément Datalist utilise l'attribut ID pour l'associer à un élément d'entrée spécifique. L'élément d'entrée utilise l'attribut de liste pour identifier le datalist. À l'intérieur du dataalist, vous pouvez définir des éléments d'option qui représentent les options disponibles pour le champ de saisie.

Comment puis-je utiliser le datalist HTML5 pour l'observation automatique?

Besoin d'associer le datalist à un champ de saisie. Cela se fait en ajoutant l'attribut de liste au champ de saisie et en définissant sa valeur à l'ID du datalist. Le navigateur suggérera ensuite des options d'ompte de secours en fonction de l'entrée de l'utilisateur et des options définies dans le datalist.

Puis-je utiliser l'élément de données HTML5 dans tous les navigateurs?

L'élément de données HTML5 est pris en charge dans La plupart des navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, il n'est pas pris en charge dans Internet Explorer 9 et les versions antérieures. Vous pouvez vérifier la compatibilité actuelle du navigateur sur des sites Web comme puis-je utiliser.

Comment puis-je styliser les options de données HTML5?

Malheureusement, les options de style de l'élément de données HTML5 sont assez limitées. L'apparence de la liste déroulante est contrôlée par le navigateur et ne peut pas être facilement personnalisée avec CSS. Cependant, vous pouvez styliser le champ de saisie associé au datalist.

Puis-je utiliser plusieurs données de données pour un seul champ de saisie?

Non, vous ne pouvez pas associer plusieurs données de données à un seul champ de saisie. L'attribut de liste du champ de saisie ne peut prendre qu'un seul ID, ce qui correspond à un données. Si vous devez fournir plusieurs ensembles d'options, vous devrez peut-être utiliser JavaScript pour modifier dynamiquement les options en fonction de l'entrée de l'utilisateur.

Puis-je utiliser le datalist HTML5 avec d'autres types d'entrée?

Oui , le Datml5 Datalist peut être utilisé avec divers types d'entrée, y compris le texte, la recherche, l'URL, le tél, le courrier électronique, la date, le mois, la semaine, l'heure, le local Datetime, le numéro, la plage et la couleur. Cependant, la fonctionnalité d'achèvement de secours peut ne pas fonctionner comme prévu avec certains types d'entrée tels que la plage ou la couleur.

Puis-je utiliser le datalist HTML5 avec un élément sélectionné?

Non, le datalist HTML5 ne peut pas être utilisé avec un élément sélectionné. Le datalist est conçu pour fournir des suggestions de saisie semi-automatique pour un champ de saisie, tandis que l'élément sélectionné fournit une liste déroulante d'options. Si vous avez besoin d'une liste déroulante, vous devez utiliser l'élément Select à la place.

Puis-je utiliser JavaScript avec le Datml5 Datalist?

Oui, vous pouvez utiliser JavaScript avec le Datml5 DataList pour ajouter dynamiquement, supprimer ou modifier les options. Cependant, gardez à l'esprit que le datalist ne prend pas en charge les événements comme Onchange ou OnClick sur ses options. Vous devez plutôt ajouter les auditeurs d'événements au champ de saisie associé.

Puis-je utiliser le datalist HTML5 pour un champ de recherche?

Oui, le données HTML5 peut être un excellent choix pour une recherche champ. Il peut fournir des suggestions de saisie automatique en fonction de l'entrée de l'utilisateur, ce qui peut améliorer l'expérience utilisateur. Cependant, vous devez remplir manuellement le datalist avec les termes de recherche possibles.

Puis-je utiliser le datalist HTML5 avec une TextArea?

Non, le dataList HTML5 ne peut pas être utilisé avec une TextArea . Le datalist est conçu pour fournir des suggestions de saisie semi-automatique pour un champ de saisie, pas pour une TextArea. Si vous avez besoin de fonctionnalités de saisie automatique pour une TextArea, vous devrez peut-être utiliser une bibliothèque JavaScript ou créer votre propre solution.