Comment créer un dataliste instantanément consultable

Les listes déroulantes sont un moyen élégant pour fournir des options pour un champ de saisie, en particulier lorsque la liste des options disponibles est longue. Un utilisateur peut choisir l'option qu'il souhaite par taper sur le terrain, ou regarder à travers les options cela peut être un match pour ce qu'ils recherchent. Être capable de chercher parmi les options, Cependant, est la solution idéale.

Ce comportement peut être atteint avec le Élément HTML qui affiche les suggestions d'entrée pour différents contrôles, tels que le étiquette. toutefois affiche uniquement les options disponibles lorsque l'utilisateur a déjà tapé quelque chose dans le champ de saisie.

Nous pouvons rendre un champ de saisie plus utilisable si nous permettons aux utilisateurs de accéder à la liste complète des options à tout moment pendant le processus de prise d'entrée.

Dans ce post, nous allons voir comment créer un liste déroulante consultable à tout moment en utilisant le étiquette est le même que la identifiant du tag - c'est ainsi que nous les lions les uns aux autres.

2. Rendre le dataliste visible

Par défaut, le L'élément HTML est caché. Nous ne pouvons le voir que lorsque nous commencer à taper une entrée dans le domaine le datalist est attaché à.

Cependant, il existe un moyen de "forcer" le contenu du dataliste (c'est-à-dire toutes ses options) apparaître sur la page web. Nous avons seulement besoin de lui donner un afficher valeur de la propriété autre que aucun, par exemple bloc de visualisation;.

 datalist display: block;

Les options affichées ne sont pas encore sélectionnables à ce stade, le navigateur seulement rend les options il trouve à l'intérieur du datalist.

Comme mentionné ci-dessus, en raison du comportement intégré du élément, une partie des options apparaissent déjà et sont sélectionnables, mais seulement lorsque l'utilisateur commence à taper une chaîne à laquelle le navigateur peut trouver une option correspondante.

Nous devons aussi trouver un mécanisme pour faire tout options (sur la capture d'écran ci-dessus affichée sous la liste des données) sélectionnable à tout autre point du processus de prise d'entrée - quand les utilisateurs veulent vérifier les options avant de taper quoi que ce soit, ou alors qu'ils ont déjà pris quelque chose dans le champ de saisie.

3. Apportez le Élément HTML.

Nous choisirons la deuxième méthode, car elle est plus simple et peut être utilisée. comme mécanisme de secours dans les navigateurs qui ne supportent pas le élément. Lorsqu'un navigateur ne peut pas restituer et afficher le datalist, il rend le Balise HTML, le code ressemble à ceci:

Datalist combiné avec Ajout du plusieurs attribuer à la balise, de sorte que lorsque l'utilisateur sélectionne une option dans la liste déroulante, sa valeur sera affichée à l'intérieur du domaine aussi bien. / * Lorsque l'utilisateur sélectionne une option dans DDL, écrivez-la dans le champ de texte * / select.addEventListener ('change', fill_input); function fill_input () input.value = options [this.selectedIndex] .value; hide_select (); Désavantages Le principal inconvénient de cette technique est la absence de manière directe de styliser la élément avec CSS (l'apparition de la et