wake-up-neo.com

Datenlistenbeschriftungen anzeigen, aber den tatsächlichen Wert übermitteln

Derzeit wird das HTML5-Element <datalist> In den meisten gängigen Browsern (außer Safari) unterstützt und scheint eine interessante Möglichkeit zu sein, Vorschläge zu einer Eingabe hinzuzufügen.

Es scheint jedoch einige Diskrepanzen zwischen der Implementierung des Attributs value und dem inneren Text in <option> Zu geben. Beispielsweise:

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

Dies wird von verschiedenen Browsern unterschiedlich gehandhabt:

Chrome und Opera:
Datalist in Chrome/Opera

FireFox und IE 11:
Datalist in FireFox

Nach der Auswahl wird die Eingabe mit dem Wert und nicht mit dem inneren Text gefüllt. Ich möchte nur, dass der Benutzer den Text ("Die Antwort") in der Dropdown-Liste und in der Eingabe sieht, aber beim Senden den Wert 42 Übergeben kann, wie dies bei einem select der Fall wäre.

Wie kann ich alle Browser so einstellen, dass die Dropdown-Liste die Beschriftungen (inneren Text) der <option> S anzeigt, aber das Attribut value sendet, wenn das Formular gesendet wird?

javascripthtmlhtml5cross-browserhtml-datalist
68
Stephan Muller

Beachten Sie, dass datalist nicht mit select identisch ist. Benutzer können einen benutzerdefinierten Wert eingeben, der nicht in der Liste enthalten ist, und es ist unmöglich, einen alternativen Wert für eine solche Eingabe abzurufen, ohne ihn zuerst zu definieren.

Mögliche Methoden zum Behandeln von Benutzereingaben sind das Übermitteln des eingegebenen Werts, das Übermitteln eines leeren Werts oder das Verhindern des Übergebens. Diese Antwort behandelt nur die ersten beiden Optionen.

Wenn Sie Benutzereingaben vollständig verbieten möchten, ist select möglicherweise die bessere Wahl.

Um nur den Textwert von option in der Dropdown-Liste anzuzeigen, verwenden wir den inneren Text und lassen das value -Attribut weg. Der tatsächliche Wert, den wir mitsenden möchten, wird in einem benutzerdefinierten Attribut data-value Gespeichert:

Um diesen data-value Einzureichen, müssen wir einen <input type="hidden"> Verwenden. In diesem Fall lassen wir den name="answer" In der regulären Eingabe weg und verschieben ihn 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">

Auf diese Weise können wir, wenn sich der Text in der ursprünglichen Eingabe ändert, mit Javascript prüfen, ob der Text auch in datalist vorhanden ist, und dessen data-value Abrufen. Dieser Wert wird in die ausgeblendete 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.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;
        }
    }
});

Die ID answer und answer-hidden Für die reguläre und die ausgeblendete Eingabe werden benötigt, damit das Skript weiß, welche Eingabe zu welcher ausgeblendeten Version gehört. Auf diese Weise ist es möglich, mehrere inputs auf derselben Seite zu haben, wobei ein oder mehrere datalists Vorschläge enthalten.

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

Funktionierende jsFiddle-Beispiele: einfaches Javascript und jQuery

83
Stephan Muller

Die Lösung, die ich benutze, ist die folgende:

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

Greifen Sie dann mit JavaScript wie folgt auf den Wert zu, der an den Server gesendet werden soll:

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


Ich hoffe es hilft.

29
Hezbullah Shah

Wenn Sie auf die Schaltfläche für die Suche klicken, können Sie sie ohne Schleife finden.
Fügen Sie der Option einfach ein Attribut mit dem gewünschten Wert hinzu (z. B. id) und suchen Sie spezifisch danach.

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