Peut HTML5 datalist différencier de la valeur et de l'option de texte?

La liste de l'attribut /datalist élément de formulaires HTML5 affiche un menu déroulant de choix, on peut choisir de, modifier, et de même type de texte. Tout cela peut être réalisé à la fois avec un chiffon propre et puissant code:

<input list="states">
<datalist id="states">
    <option value="One">
    <option value="Two">
</datalist>

Cependant, comment faire une telle forme d'envoyer une valeur qui est différente de l'option de texte, comme dans l'habitude de sélectionner les options (ci-dessous)?

<select>
    <option value="1">One</option>
    <option value="2">Two</option>
</select>
Je pense que vous ne pouvez pas faire avec une seule entrée. C'est réalisable avec une seule entrée pour le texte affiché à l'écran, et le second, caché, qui contiendra l'Id. Qui, en plus de certains script pour synchroniser.
double possible de Afficher datalist étiquettes mais de soumettre la valeur réelle

OriginalL'auteur Alex | 2013-08-27

  1. 4

    Semble que vous ne pouvez pas avec le HTML pur, sans l'aide de certains JS+CSS aider.

    essayer ce j'espère que sa vous aider.

    html

    <input id="datalisttestinput" list="stuff" ></input>
        <datalist id="stuff">
            <option id="3" value="Collin" >
            <option id="5" value="Carl">
            <option id="1" value="Amy" >
            <option id="2" value="Kristal">
        </datalist>

    script

    function GetValue() {
            var x = $('#datalisttestinput').val();
            var z = $('#stuff');
            var val = $(z).find('option[value="' + x + '"]');
            var endval = val.attr('id');
            alert(endval);
        }

    Meilleurs Voeux
    Kumar

    Vous avez utilisé une bibliothèque ici, alors s'il vous plaît état. Aussi, @Alex a demandé comment faire la forme d'envoyer l'identifiant de la liste sélectionnée de la valeur. Je pense donc que votre script doit modifier l'élément, ou ajouter un élément masqué qui contiendra l'id.
    oui votre droite, j'ai pu ajouter un élément masqué post le contenir l'identification seulement. son travail comme d'habitude, sélectionnez l'option.
    Kumar, semble de crédit à @infocyde devrait être dans vos notes quelque part que votre solution ressemble à un couper-coller de sa réponse ici: stackoverflow.com/questions/14532398/...
    J'ai voté. J'ai étendu la fonctionnalité d'un peu: Si le niveau de l'id est vide, alors l'utilisateur définitivement entrés dans une nouvelle valeur, je vais l'utiliser pour créer une NOUVELLE entrée dans la liste existante (où je l'ai récupéré la liste originale de) [sur le côté serveur].
    avant de safari implémente <datalist> (html5??), il a besoin d'avoir attribut "value" enregistrer la valeur, et "label" de l'étiquette, ne pas mélanger les deux dans la liste déroulante de la ligne. "étiquette" attribut doit être le seul visible HTML, pas de la valeur de hachage pour elle aussi. sans cette fonctionnalité, vous devez disposer de l'affichage de la valeur -- lisible off <datalist> modèle-avec l'étiquette. par exemple "Mon titre 1", ou "awfj23@#$" (qui correspond à Mon titre 1 dans certains de la table de hachage). pourquoi, par exemple, vous voulez que votre utilisateur de savoir ce que l'identifiant unique est

    OriginalL'auteur Kumar Shanmugam

  2. 1

    Ci-dessous est Kumah modifiée de la réponse qui utilise un champ caché pour contenir la valeur qui en fin de compte est envoyé au serveur.

    $('#inputStates').change(function(){
    var c =  $('#inputStates').val();
    $('#inputStates').val(getTextValue());
    $('#statesHidden').val(c);
});

function getTextValue(){
  var val =  $('#inputStates').val();
  var states = $('#states');
  var endVal = $(states).find('option[value="' + val + '"]');
  //depending on your logic, if endVal is empty it means the value wasn't found in the datalist, you can take some action here
  return endVal.text();
}

    OriginalL'auteur user1587439