Notez que ce datalist
n'est pas la même chose qu'un select
. Il permet aux utilisateurs d'entrer une valeur personnalisée qui ne figure pas dans la liste, et il serait impossible d'extraire une valeur alternative pour une telle entrée sans la définir au préalable.
Les moyens possibles de gérer les entrées utilisateur sont de soumettre la valeur entrée telle quelle, de soumettre une valeur vide ou d'empêcher la soumission. Cette réponse ne gère que les deux premières options.
Si vous souhaitez interdire entièrement la saisie utilisateur, ce select
serait peut -être un meilleur choix.
Pour afficher uniquement la valeur de texte de option
dans la liste déroulante, nous utilisons le texte interne pour cela et omettons l' value
attribut. La valeur réelle que nous voulons envoyer est stockée dans un data-value
attribut personnalisé :
Pour soumettre cela, data-value
nous devons utiliser un fichier <input type="hidden">
. Dans ce cas, nous omettons le name="answer"
sur l'entrée normale et le déplaçons vers la copie cachée.
<input list="suggestionList" id="answerInput">
<datalist id="suggestionList">
<option data-value="42">The answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">
De cette façon, lorsque le texte de l'entrée d'origine change, nous pouvons utiliser javascript pour vérifier si le texte est également présent dans le datalist
et le récupérer data-value
. Cette valeur est insérée dans l'entrée masquée et soumise.
document.querySelector('input[list]').addEventListener('input', function(e) {
var input = e.target,
list = input.getAttribute('list'),
options = document.querySelectorAll('#' + list + ' option'),
hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden'),
inputValue = input.value;
hiddenInput.value = inputValue;
for(var i = 0; i < options.length; i++) {
var option = options[i];
if(option.innerText === inputValue) {
hiddenInput.value = option.getAttribute('data-value');
break;
}
}
});
L'identifiant answer
et answer-hidden
l'entrée normale et cachée sont nécessaires pour que le script sache quelle entrée appartient à quelle version cachée. De cette façon, il est possible d'avoir plusieurs input
s sur la même page avec un ou plusieurs datalist
s fournissant des suggestions.
Toute entrée utilisateur est soumise telle quelle. Pour soumettre une valeur vide lorsque l'entrée utilisateur n'est pas présente dans la liste de données, passez hiddenInput.value = inputValue
àhiddenInput.value = ""
Exemples de travail avec jsFiddle: javascript et jQuery
value=""
devrait prévaloir sur une chaîne dans les balises, chaque fois qu'il y a unevalue=""
déclaration. La suggestion serait donc de faire de "la réponse" votre attribut de valeur.