it-swarm.com.de

Legen Sie die Werte für ausgeblendete Datalistenoptionen fest

Im folgenden Snippet stehen zwei Methoden zur Auswahl eines Elements zur Verfügung: Eingabe mit Datumsliste und traditionelle Auswahl mit Optionen.

Das select -Element hält die Optionswerte ausgeblendet, und wir können es weiterhin mit this.value erhalten. Bei der Dataliste wird der Wert jedoch tatsächlich angezeigt und der Textinhalt der Option wird als sekundäre Bezeichnung angezeigt.

Ich möchte, dass sich der input + datalistische Ansatz wie ein traditionelles select verhält, wobei "Foo" und "Bar" als Optionen angezeigt werden, die bei Auswahl Werte "1" bzw. "2" haben.

Ich habe auch einen wiederholten Namen "Foo" mit dem Wert "3" hinzugefügt. Dies soll zeigen, dass jede Lösung nicht von einzigartigen Optionen abhängig sein darf.

<input list="options" onchange="console.log(this.value)"/>
<datalist id="options">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

<select onchange="console.log(this.value)">
  <option value=""></option>
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</select>

9
Rick Viscomi

Es gibt keinen einheimischen Weg. Für Texteingaben

Das input Element repräsentiert eine einzeilige Klartextbearbeitung Steuerelement für das Element Wert .

Daher ist es nicht möglich, bei einer Texteingabe Text anzuzeigen, der von seinem Wert abweicht.

Sie könnten den value-Getter in HTMLInputElement.prototype hijacken, aber ich empfehle ihn nicht. Ich sehe keine Möglichkeit herauszufinden, welche Option gewählt wurde, wenn die Werte nicht eindeutig sind.

var des = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
Object.defineProperty(HTMLInputElement.prototype, 'value', { get: function() {
  if(this.type === 'text' && this.list) {
    var value = des.get.call(this);
    var opt = [].find.call(this.list.options, function(option) {
      return option.value === value;
    });
    return opt ? opt.dataset.value : value;
  }
}});
<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
  <option data-value="1">Foo</option>
  <option data-value="2">Bar</option>
  <option data-value="3">Foo</option>
</datalist>

Oder Sie können die Eingabe den Wert der Option anstelle des Textes anzeigen lassen, aber sofort ersetzen:

var inp = document.querySelector('input');
inp.addEventListener('input', function() {
  var value = this.value;
  var opt = [].find.call(this.list.options, function(option) {
    return option.value === value;
  });
  if(opt) {
    this.value = opt.textContent;
  }
});
<input list="options" oninput="console.log(this.value);" />
<datalist id="options">
  <option value="1">Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

Im zweiten Beispiel zeigt oninput="console.log(this.value)" den Wert der Option, da dieser Code ausgeführt wird, bevor der Wert durch den Textinhalt ersetzt wird. Wenn später .value-Zugriffe den Optionswert zurückgeben sollen, müssen Sie den value-Getter wie im ersten Beispiel entführen.

3
Oriol

Für die Codebasis, an der ich arbeite, habe ich einen programmatischen FieldWriter zum Schreiben dynamischer Formulare. Ich wurde gebeten, eine Reihe von Auserwählten in Autocomplete-Datalisten zu verwandeln. Was ich dafür getan habe, sind 3 Elemente.

  • Ein Datalist mit dem Namen "somefield_dl"
  • Eine sichtbare Eingabe mit dem Namen "somefield_proxy"
  • Eine versteckte Eingabe mit dem Namen "Somefield"

Bei den Datalisten habe ich jede Option wie folgt gesetzt: <option data-value="439" value="Readable Text"></option>

Bei Ereignishandlern wird bei jeder Änderung des "somefield_proxy" das "somefield" in den Datenwert der Option von "somefield_dl" mit einem übereinstimmenden Wert geändert.

Codemäßig besteht der Hauptunterschied darin, dass Sie bei jeder Aktualisierung des Feldwerts das Klickereignis für die ausgeblendete Eingabe auslösen müssen, um die Proxy-Eingabe zu aktualisieren. Außerdem müssen Sie beim Erfassen von Daten die Elemente ausschließen, deren Name mit _proxy endet.

0

Die korrekte Syntax von Datalist ist wie unten beschrieben. Es hat auch keinen Sinn, zwei Optionen mit demselben Namen zu haben. Ich habe das JavaScript aus dem HTML-Code herausgenommen, wie es sein sollte. ID-Attribut der einzelnen Optionen kann durch andere Attribute ersetzt werden.

$(function() {
  $('input[name=chooseOption]').on('input',function() {
    var selectedOption = $('option[value="'+$(this).val()+'"]');
    console.log(selectedOption.length ? selectedOption.attr('id') : 'This opiton is not in the list!');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input list="options" name="chooseOption">
<datalist id="options">
  <option id="1" value="Foo">
  <option id="2" value="Bar">
  <option id="3" value="Foo">
</datalist>

0

Weiß nicht, dass dies Ihnen helfen wird, machte nur einen Versuch

  <input list="options" id="opt" oninput="onInput()">
  <datalist id="options">
        <option value="1">Foo</option>
       <option value="2">Bar</option>
       <option value="3">Foo</option> 
        <option value="4">Foo</option>
       <option value="5">Bar</option>
       <option value="6">Foo</option> 
  </datalist>




 $( document ).ready(function() {              
         var x =  document.getElementById("options");
           for (i = 0; i < x.length; i++)
            alert(x.options[i].value);     


            $("#opt").click(function(){
                 $("#opt").val("");});                   
             });

     function onInput() {
            var val = document.getElementById("opt").value;
            var opts = document.getElementById('options').childNodes;
             for (var i = 0; i < opts.length; i++) {
                    if (opts[i].value === val) {                
                    document.getElementById("opt").value = opts[i].value + "   "+ opts[i].innerHTML;
                    break;
                  }
                }
              }
0
Sun_Sparxz

Sie können data-value und jquery verwenden, um Ihren Wert auszublenden.

z.B:

$(document).ready(function() {

    $('#submit').click(function()
    {
        var value = $('#selected').val();
        alert($('#browsers [value="' + value + '"]').data('value'));
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="selected" list="browsers" name="browser">
<datalist id="browsers">
    <option data-value="1" value="InternetExplorer"></option>
    <option data-value="2" value="Firefox"></option>
    <option data-value="3" value="Chrome"></option>

</datalist>
<input id="submit" type="submit">

jsfiddle

Danke an @ guest271314

0
HybrisHelp