anzeigen Datalist Etikett aber den tatsächlichen Wert

Question

Derzeit ist das <datalist> Element HTML5 einreichen in den meisten gängigen Browsern (außer Safari) und scheint wie eine interessante Art und Weise hinzuzufügen, Vorschläge zu einem Eingang unterstützt wird.

Es scheint jedoch einige Diskrepanzen zwischen der Implementierung des value Attributs und dem inneren Text auf dem <option> zu geben. Zum Beispiel:

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

Dies wird unterschiedlich von verschiedenen Browsern behandelt:

Chrome und Opera:

FireFox und IE 11:

Nach einer Auswahl der Eingabe wird mit dem Wert und nicht mit dem inneren Text gefüllt. Ich will nur der Benutzer den Text („Die Antwort“) in der Dropdown-Liste und in den Eingang zu sehen, aber geben Sie den Wert 42 auf einreichen, wie ein select würde.

Wie kann ich alle Browser die Dropdown-Liste zeigt die Straßennamen (Text Innen) des <option> s, aber senden Sie das value Attribut, wenn das Formular abgeschickt wird?

Answer 1

Beachten Sie, dass datalist als select nicht gleich ist. Benutzer können einen benutzerdefinierten Wert eingeben, der nicht in der Liste enthalten ist, und es wäre unmöglich, einen alternativen Wert für diese Eingabe abzurufen, ohne ihn zuvor zu definieren.

Mögliche Wege Benutzereingaben zu verarbeiten sind den eingegebenen Wert zu unterbreiten, wie, oder füllen sie einen leeren Wert oder einreichenden zu verhindern. Diese Antwort behandelt nur die ersten beiden Optionen.

Wenn Sie ganz Benutzereingaben nicht zulassen wollen, vielleicht select wäre eine bessere Wahl sein.

---

Um nur den Textwert des option in der Dropdown-Liste zu zeigen, verwenden wir den inneren Text für sie und lassen Sie die value Attribut. Der tatsächliche Wert, den wir senden möchten, wird in einem benutzerdefinierten data-value-Attribut gespeichert:

Zum Senden data-value müssen wir eine <input type="hidden"> verwenden. In diesem Fall lassen wir die name="answer" auf der regulären Eingabe weg und verschieben sie in die versteckte Kopie.

<input list="suggestionList" id="answerInput"> 
<datalist id="suggestionList"> 
    <option data-value="42">The answer</option> 
</datalist> 
<input type="hidden" name="answer" id="answerInput-hidden">

diese Weise, wenn der Text in den ursprünglichen Eingang Änderungen, die wir Javascript auch im datalist vorhanden, wenn der Text überprüfen können und seine data-value holen. Dieser Wert wird in die versteckte Eingabe eingefügt und übergeben.

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.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; 
     } 
    } 
}); 

---

Die ID answer und answer-hidden auf dem regulären und versteckten Eingang werden für das Skript erforderlich zu wissen, welchem ​​Eingang, an die verborgene Version gehört. Auf diese Weise ist es möglich, mehrere input s auf der gleichen Seite mit einem oder mehreren datalist s bieten Anregungen zu haben.

Alle Benutzereingaben werden unverändert übermittelt. Um einen leeren Wert einreichen, wenn die Benutzereingabe nicht in der Datenliste ist, ändern hiddenInput.value = label zu hiddenInput.value = ""

---

Arbeits jsFiddle Beispiele: plain javascript und jQuery

Answer 2

die Lösung, die ich verwenden ist

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

Der Zugriff auf den Wert an den Server per Javascript gesendet werden als

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

hoffe es hilft