Afficher les étiquettes de liste de données mais soumettre la valeur réelle

Actuellement, l' <datalist>élément HTML5 est pris en charge dans la plupart des principaux navigateurs (à l'exception de Safari) et semble être un moyen intéressant d'ajouter des suggestions à une entrée.

Cependant, il semble y avoir des divergences entre la mise en œuvre de l' valueattribut et le texte interne sur le <option>. Par exemple:

<input list="answers" name="answer">
<datalist id="answers">
  <option value="42">The answer</option>
</datalist>

Ceci est géré différemment par différents navigateurs:

Chrome et Opera:

FireFox et IE 11:

Après en avoir sélectionné un, l'entrée est remplie avec la valeur et non avec le texte interne. Je veux seulement que l'utilisateur voit le texte ("La réponse") dans la liste déroulante et dans l'entrée, mais passe la valeur 42lors de la soumission, comme le selectferait.

Comment puis-je faire en sorte que tous les navigateurs aient la liste déroulante pour afficher les étiquettes (texte intérieur) du <option>s, mais envoyer l' valueattribut lorsque le formulaire est soumis?

Notez que ce datalistn'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 selectserait peut -être un meilleur choix.

Pour afficher uniquement la valeur de texte de optiondans la liste déroulante, nous utilisons le texte interne pour cela et omettons l' valueattribut. La valeur réelle que nous voulons envoyer est stockée dans un data-valueattribut personnalisé :

Pour soumettre cela, data-valuenous 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 datalistet 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 answeret answer-hiddenl'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 inputs sur la même page avec un ou plusieurs datalists 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

La solution que j'utilise est la suivante:

<input list="answers" id="answer">
<datalist id="answers">
  <option data-value="42" value="The answer">
</datalist>

Accédez ensuite à la valeur à envoyer au serveur en utilisant JavaScript comme ceci:

var shownVal = document.getElementById("answer").value;
var value2send = document.querySelector("#answers option[value='"+shownVal+"']").dataset.value;

J'espère que cela aide.

Je me rends compte que c'est peut-être un peu tard, mais je suis tombé dessus et je me demandais comment gérer des situations avec plusieurs valeurs identiques, mais des clés différentes (selon le commentaire de bigbearzhu).

J'ai donc légèrement modifié la réponse de Stephan Muller:

Une liste de données avec des valeurs non uniques:

<input list="answers" name="answer" id="answerInput">
<datalist id="answers">
  <option value="42">The answer</option>
  <option value="43">The answer</option>
  <option value="44">Another Answer</option>
</datalist>
<input type="hidden" name="answer" id="answerInput-hidden">

Lorsque l'utilisateur sélectionne une option, le navigateur remplace input.valuepar le valuede l' datalistoption au lieu du innerText.

Le code suivant recherche ensuite un optionavec cela value, le pousse dans le champ masqué et remplace le input.valuepar le innerText.

document.querySelector('#answerInput').addEventListener('input', function(e) {
    var input = e.target,   
        list = input.getAttribute('list'),
        options = document.querySelectorAll('#' + list + ' option[value="'+input.value+'"]'),
        hiddenInput = document.getElementById(input.getAttribute('id') + '-hidden');

    if (options.length > 0) {
      hiddenInput.value = input.value;
      input.value = options[0].innerText;
      }

});

En conséquence, l'utilisateur voit tout ce que dit l'option innerText, mais l'identifiant unique de option.valueest disponible lors de la soumission du formulaire. Démo jsFiddle

En cliquant sur le bouton de recherche, vous pouvez le trouver sans boucle.
Ajoutez simplement à l'option un attribut avec la valeur dont vous avez besoin (comme id) et recherchez-le spécifique.

$('#search_wrapper button').on('click', function(){
console.log($('option[value="'+ 
$('#autocomplete_input').val() +'"]').data('value'));
})

En utilisant PHP, j'ai trouvé un moyen assez simple de le faire. Les gars, utilisez quelque chose comme ça

<input list="customers" name="customer_id" required class="form-control" placeholder="Customer Name">
            <datalist id="customers">
                <?php 
    $querySnamex = "SELECT * FROM `customer` WHERE fname!='' AND lname!='' order by customer_id ASC";
    $resultSnamex = mysqli_query($con,$querySnamex) or die(mysql_error());

                while ($row_this = mysqli_fetch_array($resultSnamex)) {
                    echo '<option data-value="'.$row_this['customer_id'].'">'.$row_this['fname'].' '.$row_this['lname'].'</option>
                    <input type="hidden" name="customer_id_real" value="'.$row_this['customer_id'].'" id="answerInput-hidden">';
                }

                 ?>
            </datalist>

Le code ci-dessus permet au formulaire de porter l'identifiant de l'option également sélectionnée.