Datenlistenbeschriftungen anzeigen, aber den tatsächlichen Wert angeben

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

Es scheint jedoch einige Diskrepanzen zwischen der Implementierung des valueAttributs und dem inneren Text auf dem zu geben <option>. 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:

FireFox und IE 11:

Nach Auswahl eines 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 den Wert beim Senden übergibt 42, wie zselect würde.

Wie kann ich dafür sorgen, dass alle Browser in der Dropdown-Liste die Beschriftungen (inneren Text) des <option>s anzeigen , aber das valueAttribut senden , wenn das Formular gesendet wird?

Beachten Sie, dass dies datalistnicht dasselbe ist wie a select. 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 Möglichkeiten zur Verarbeitung von Benutzereingaben bestehen darin, den eingegebenen Wert unverändert zu übermitteln, einen leeren Wert zu übermitteln oder das Übermitteln zu verhindern. Diese Antwort behandelt nur die ersten beiden Optionen.

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

Um nur den optionTextwert von in der Dropdown-Liste anzuzeigen, verwenden wir den inneren Text dafür und lassen das valueAttribut weg . Der tatsächliche Wert, den wir senden möchten, wird in einem benutzerdefinierten data-valueAttribut gespeichert :

Um dies einzureichen, müssen data-valuewir eine verwenden <input type="hidden">. In diesem Fall lassen wir name="answer"die reguläre 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">

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 der vorhanden ist, datalistund ihn abrufendata-value . Dieser Wert wird in die versteckte Eingabe eingefügt und gesendet.

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 sowie answer-hiddendie reguläre und versteckte Eingabe werden benötigt, damit das Skript weiß, welche Eingabe zu welcher versteckten Version gehört. Auf diese Weise ist es möglich, mehrere inputs mit einem oder mehreren auf derselben Seite zu habendatalist s Vorschläge liefern.

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

Arbeitsbeispiele für jsFiddle: einfaches Javascript und jQuery

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.

Mir ist klar, dass dies etwas spät sein kann, aber ich bin darauf gestoßen und habe mich gefragt, wie ich mit Situationen mit mehreren identischen Werten, aber unterschiedlichen Schlüsseln umgehen soll (gemäß Bigbearzhus Kommentar).

Also habe ich Stephan Mullers Antwort leicht modifiziert:

Ein Datalist mit nicht eindeutigen Werten:

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

Wenn der Benutzer eine Option, der Browser ersetzt input.valuemit der valueder datalistOption statt der innerText.

Der folgende Code sucht dann nach einem optiondamit value, schiebt das in das versteckte Feld und ersetzt das input.valuedurch das 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;
      }

});

Infolgedessen sieht der Benutzer, was auch immer die Option innerTextsagt, aber die eindeutige ID von option.valueist beim Senden des Formulars verfügbar. Demo jsFiddle

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 Wert hinzu, den Sie benötigen (wie id), und suchen Sie danach.

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

Mit PHP habe ich einen recht einfachen Weg gefunden, dies zu tun. Leute, benutzt einfach so etwas

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

Mit dem obigen Code kann das Formular die ID der ebenfalls ausgewählten Option tragen.