Formulaire HTML: Select-Option vs Datalist-Option

D'un point de vue technique, ils sont complètement différents. <datalist> est un conteneur abstrait d'options pour d'autres éléments. Dans votre cas, vous l'avez déjà utilisé avec <input type="text", mais vous pouvez également l'utiliser avec des plages, des couleurs, des dates etc. http://demo.agektmr.com/datalist/

Si vous l'utilisez avec la saisie de texte, comme un type de saisie semi-automatique, alors la question est vraiment: est-il préférable d'utiliser une saisie de texte de forme libre, ou une liste prédéterminée d'options? Dans ce cas je pense que la réponse est un peu plus évident.

Si nous nous concentrons sur l'utilisation de <datalist> comme une liste d'options pour un champ de texte, voici quelques différences spécifiques entre cela et une boîte de sélection:

• une zone de texte <datalist> fed a une seule chaîne pour l'étiquette d'affichage et l'envoi. Une boîte de sélection peut avoir une valeur de soumission différente de l'étiquette d'affichage <option value='ie'>Internet Explorer</option>.
• une zone de texte <datalist> fed ne prend pas en charge la balise <optgroup> pour organiser l'affichage.
• vous ne pouvez pas restreindre un utilisateur à la liste des options d'un <datalist> comme vous pouvez avec un <select>.
• l'événement onchange fonctionne différemment. Sur un <select> élément, l'événement onchange est déclenché immédiatement lors d'un changement, alors qu'avec <input type="text" l'événement est déclenché après l'élément perd le focus ou l'utilisateur appuie sur entrée.
• {[0] } a un support vraiment inégal à travers les navigateurs. La façon de montrer toutes les options disponibles est incohérente, et les choses ne font qu'empirer à partir de là.

Le dernier point est vraiment le grand à mon avis. Puisque vous Avoir un repli de saisie semi-automatique plus universel, alors il n'y a presque aucune raison de passer par la peine de configurer un <datalist>. De plus, tout plugage autocomplete décent permettra de styliser l'affichage de vos options, ce que <datalist> ne fait pas. Si <datalist> acceptait <li> des éléments que vous pourriez manipuler comme vous le souhaitez, cela aurait été vraiment génial! Mais non.

Aussi dans la mesure où je peux dire, la recherche <datalist> est une correspondance exacte depuis le début de la chaîne. Donc, si vous aviez <option value="internet explorer"> et vous avez cherché 'explorer' vous n'obtiendriez aucun résultat. La plupart des plugins de saisie semi-automatique vont chercher n'importe où dans le texte.

J'ai seulement utilisé <datalist> comme un assistant pratique rapide et paresseux pour certaines pages internes où je sais avec une certitude de 100% que les utilisateurs ont le dernier Chrome ou Firefox, et n'essaiera pas de soumettre des valeurs fausses. Dans tous les autres cas, il est difficile de recommander l'utilisation de <datalist> en raison de la très mauvaise prise en charge du navigateur.

Datalist inclut la saisie semi-automatique et les suggestions nativement, il peut également permettre à un utilisateur d'entrer une valeur qui n'est pas définie dans les suggestions.

Select ne vous donne que des options prédéfinies que l'utilisateur doit sélectionner

Data List est une nouvelle balise HTML dans les navigateurs supportés par HTML5. Il rend comme une zone de texte avec une liste d'options. Par exemple, pour la zone de texte de genre, il vous donnera des options en tant que Mâle Femelle lorsque vous tapez 'M' ou 'F' dans la zone de texte.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

J'ai remarqué qu'il n'y a pas de fonctionnalité sélectionnée dans datalist. Il vous donne seulement le choix, mais ne peut pas avoir une option par défaut. Vous ne pouvez pas non plus afficher l'option sélectionnée sur la page suivante.

Pour répondre spécifiquement À une partie de votre question "Est-il de la situation dans laquelle il serait préférable d'utiliser l'un ou l'autre?", considérons une forme avec des sections répétitives. Si la section répétitive contient plusieurs balises select, les option doivent être rendus pour chaque select, pour chaque ligne.

Dans un tel cas, j'envisagerais d'utiliser datalist avec input, car le même datalist peut être utilisé pour n'importe quel nombre de inputs. Cela pourrait potentiellement économiser beaucoup de temps de rendu sur le serveur, et évoluerait beaucoup mieux à n'importe quel nombre de lignes.

, Il existe une autre différence importante entre les select et datalist. Voici le facteur de support du navigateur.

Select est largement pris en charge par les navigateurs par rapport à datalist. Veuillez jeter un oeil à cette page pour le support complet du navigateur de datalist--

Datalist prise en charge du navigateur

Où as select est pris en charge dans tous les navigateurs (depuis IE6+, Firefox 2+, Chrome 1 + etc)

C'est similaire à select, mais datalist a des fonctionnalités supplémentaires comme auto suggest. Vous pouvez même taper et voir des suggestions au fur et à mesure que vous tapez.

L'Utilisateur sera également capable d'écrire des éléments qui ne sont pas là dans la liste.