HTML5 datalist valeur vs intérieure-texte

J'ai un problème qui se manifeste entre Chrome et Firefox traitement de l'HTML5 datalist élément.

J'ai peut-être abuser, Firefox est de la manipulation de la façon dont je l'attend, mais Chrome ne l'est pas. Je ne l'ai pas essayé sur l'Opéra. C'est pour une maison en page, afin que je puisse contrôler le navigateur utilisé.

J'ai mis une valeur, ainsi que l'intérieur du texte, comme dans:

<input list="Names" placeholder="Enter Name or ID" name="txtSearchValue" autocomplete="off"/>
<datalist id="Names"><%=OptionsList%></datalist>

Côté serveur, la valeur "OptionsList" se construit dynamiquement à partir d'une requête de base de données. Le résultat final ressemble à peu près comme ceci:

<option value="123">Sam's Fresh Sandwiches</option>
<option value="234">Sawatdee</option>

etc.

Sur Firefox, je peux taper les lettres "S", puis "A" (insensible à la casse) et les deux entrées ci-dessus apparaît. Dès que j'ai du type "W" ou sélectionnez Sawatdee avec la souris, la zone de texte est rempli avec 234. C'est ce que j'ai envie de voir se produire - que je veux 234 envoyé vers le serveur et pas Sawatdee. Il fonctionne aussi si je tape "A" puis "T".

Sur Chrome, je peux taper toutes les lettres que je veux, mais rien n'apparaît dans la liste. Cependant, si j'type 2, seule la deuxième entrée apparaissent, mais dans la liste, il va montrer un 2 suivi par Sawatdee.

Suis-je la sur-utilisation de/abusant de la datalist ou n'Chrome ont un problème avec ça? Ou est-Chrome de le manipuler comme il est techniquement censé et j'ai trouvé un bug Firefox?

Depuis tous les navigateurs implémentent cette fonctionnalité différemment, lorsque google Chrome voir une "valeur" dans l'option tag - elle l'utilise comme filtre au lieu du nom d'affichage. J'utilise la description au lieu de la valeur, et placé la valeur en (123) ou [234] et du côté serveur, le tire à l'id de l'aide de REGEX ou quelque chose ...
double possible de Afficher datalist étiquettes mais de soumettre la valeur réelle
également liées: stackoverflow.com/questions/18464479/...

OriginalL'auteur user2012720 | 2013-01-26

  1. 6

    Je suis en train de faire quelque chose de similaire. Je pense que le problème est le datalist n'est pas spec ed à travailler comme une option de liste déroulante liste. Un travail autour de est de générer à la fois un <%=OptionsList%> et puis un tableau <%=OptionListValues %>...donc, une fois que vous obtenez la valeur de texte de votre entrée, vous pouvez utiliser javascript pour chercher la clé dans la OptionListValues et envoyer la clé au lieu de la description sur le serveur. Douleur à l'arrière et ajoute à la charge de données côté client, bien que je suppose que vous pourriez faire de ce côté serveur en tant que bien (envoyer le texte dans l'entrée, puis recherche le texte et obtenir la clé sur le côté serveur).

    Trop mauvais Chrome ne fonctionne pas comme les FF sur ce, peut-être dans l'avenir les navigateurs comme Mozilla sur ce.

    Ou vous pouvez faire quelque chose comme cela. Dire que vous avez l'entrée suivante/datalist

    <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>

    Vous pouvez utiliser jQuery (ou plaine de javascript) pour creuser la valeur de l'id...voici mon exemple, je suis sûr que cela pourrait être optimisé un peu.

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

    Qui devrait vous aller.

    Merci pour cette ASTUCE. J'ai vraiment cherché. Même si je pense que l'option pourrait avoir obtenir une balise select...

    OriginalL'auteur infocyde

  2. 2

    Modifiant légèrement infocyde, en réponse à l'utilisation d'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