Wie erhalte ich das Änderungsereignis für eine Datenliste?

Ich verwende eine Datenliste und muss erkennen, wann der Benutzer etwas aus der Dropdown-Liste auswählt. Eine ähnliche Frage wurde gestellt, ABER ich brauche sie, damit das Ereignis NUR ausgelöst wird, wenn der Benutzer etwas aus der Datenliste auswählt. Wenn sie etwas in die Eingabe eingeben, möchte ich NICHT, dass das Ereignis ausgelöst wird. (Beachten Sie in der akzeptierten Antwort auf die von mir verlinkte Frage, dass sie die Eingabe binden, was ich nicht möchte). Ich habe versucht (ohne Erfolg):

<datalist>
    <option>Option 1 Here</option> 
    <option>Option 2 Here</option>
</datalist>


$(document).on('change', 'datalist', function(){
   alert('hi');
});

BEARBEITEN: Diese Frage unterscheidet sich von der vorgeschlagenen Frage, da es sich um eine völlig andere Frage handelt.

Sie können es bei Änderung manuell überprüfen. Sie müssen jedoch die Änderung der Eingabe der Datenliste überprüfen.

GEIGE

$(document).on('change', 'input', function() {
  var options = $('datalist')[0].options;
  var val = $(this).val();
  for (var i = 0; i < options.length; i++) {
    if (options[i].value === val) {
      console.log(val);
      break;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<input list="ff">
<datalist id="ff">
  <option>Option 1 Here</option>
  <option>Option 2 Here</option>
</datalist>

Im Browser mit der Eingabetyp -Eigenschaft auf dem InputEvent können Sie diese verwenden, um unerwünschte onInput-Ereignisse herauszufiltern. Dies ist „insertReplacementText“ bei Firefox 81 und null für Chrome/Edge 86. Wenn Sie IE11 unterstützen müssen, müssen Sie überprüfen, ob der Wert gültig ist.

document.getElementById("browser")
  .addEventListener("input", function(event){
        if(event.inputType == "insertReplacementText" || event.inputType == null) {
          document.getElementById("output").textContent =  event.target.value;
          event.target.value = "";
    }
})

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
<div id="output">
</div>

Die Lösungen haben vor allem ein großes Problem. Wenn die Datenliste die Option (zum Beispiel) “bob” und “bobby” hat, sagt der Code sofort, sobald jemand “bob” eingibt, dass es dasselbe ist wie das Klicken auf “bob” … aber was wäre, wenn er es versuchen würde tippe “bobby”?

Für eine bessere Lösung benötigen wir einige weitere Informationen. Beim Abhören des ‘input’-Ereignisses im Eingabefeld:

Wenn Sie in Chromium-basierten Browsern in ein Eingabefeld eingeben, löschen, zurücksetzen, ausschneiden, einfügen usw., ist das Ereignis, das an den Handler übergeben wird, ein InputEventwohingegen, wenn Sie eine Option aus der Datenliste auswählen, das Ereignis nur ein ist Event Typ mit einer Eigenschaft von type das entspricht “Eingabe”. (Dies gilt auch während eines Autofill, zumindest bei BitWarden).

Sie können also auf ein ‘Eingabe’-Ereignis lauschen und prüfen, ob es sich um eine Instanz von handelt InputEvent um festzustellen, ob es sich um die automatische Ausfüllung handelt (was meiner Meinung nach zulässig sein sollte, da die automatische Ausfüllung diese Art von Feldern meistens nicht ausfüllt, und wenn dies der Fall ist, ist dies normalerweise eine legitime Wahl) / Datenlistenauswahl.

Bei Firefox ist das allerdings anders. Es bietet immer noch eine InputEventaber es hat eine inputType Eigenschaft mit dem Wert “insertReplacementText”, die wir ebenfalls verwenden können. Autofill macht dasselbe wie Chromium-Browser.

Also hier ist eine bessere Lösung:

$('#yourInput').on('input', function(){
    if (
        !(e instanceof InputEvent) ||
        e.inputType === 'insertReplacementText')
    ) {
        // determine if the value is in the datalist. If so, someone selected a value in the list!
    }
});

Ich wünschte, die Browser hätten die gleiche Implementierung, die einen Ereignistyp/eine Eigenschaft hatte, die exklusiv für die Datenlistenauswahl war, aber das ist nicht der Fall, also ist dies das Beste, was ich habe. Ich habe dies nicht auf Safari getestet (ich habe gerade keinen Zugriff oder keine Zeit), also sollten Sie es sich wahrscheinlich ansehen und sehen, ob es dasselbe ist oder andere unterscheidende Unterschiede aufweist.

AKTUALISIEREN:

Mir ist aufgefallen, dass, wenn Sie bereits das vollständige Wort eingegeben haben (z. B. Sie haben „Firefox“ eingegeben) und dann die Option ausgewählt haben, die mit Ihrer Eingabe übereinstimmt (z. B. Sie die Option „Firefox“ ausgewählt haben), keine „Eingabe “, sodass Sie nicht wissen, dass zu diesem Zeitpunkt eine der Optionen ausgewählt wurde. Sie benötigen also auch einen Keydown/Keypress/Keyup-Ereignis-Listener, den Sie hören können, wenn sie die Eingabetaste drücken. In Chromium-Browsern stellt es jedoch tatsächlich einen Schlüssel bereit code von undefined wenn Sie die Eingabetaste drücken oder auf eine Option klicken (ja, der Klick erzeugt ein Keyup-Ereignis). In Firefox heißt es, dass Sie die Eingabetaste drücken, aber es werden keine Ereignisse ausgelöst, die ich finden kann, wenn Sie auf eine Option klicken.

Optimierte Lösung

$("input").on('input', function () {
    var inputValue = this.value;
    if($('datalist').find('option').filter(function(){
        return this.value == inputValue;        
    }).length) {
        //your code as per need
        alert(this.value);
    }
});

Bitte suchen Sie nach Ihrer Lösung, es ist gut zu gehen. Habe nach Demo gesucht

$(document).on('change', 'input', function(){
    var optionslist = $('datalist')[0].options;
    var value = $(this).val();
    for (var x=0;x<optionslist.length;x++){
       if (optionslist[x].value === value) {
          //Alert here value
          console.log(value);
          break;
       }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input list="data">
<datalist id="data">
    <option value="1">Option 1 Here</option> 
    <option value="2">Option 2 Here</option>
</datalist>

Mehr Optimieren

$("input").on('input', function () {
  if($('datalist').find('option[value="'+this.value+'"]')){
    //your code as per need
    alert(this.value);
  }
});

Dies könnte nur Chrome sein, woanders nicht getestet!aber ich sehe ein change Ereignis, das ausgelöst wird, wenn eine Option ausgewählt wird. Normalerweise change passiert nur in Textfeldern, wenn das Feld den Fokus verliert. Das change Ereignisauslöser vor dem blur Ereignis WENN es sich um eine normale Nicht-Datenlisten-Änderung handelt, müssen wir also beides überprüfen: Wir suchen nach a change das ist nicht sofort gefolgt von einem blur:

var timer;
el.addEventListener('change', function(e) {
    timer = setTimeout(function() {
        el.dispatchEvent(new CustomEvent('datalistchange'));
    }, 1);
});
el.addEventListener('blur', function(e) {
    clearTimeout(timer);
});

Und dann können Sie auf den Brauch hören datalistchange Veranstaltung wie gewohnt. Oder Sie können einfach Ihre spezifische Logik anstelle von setzen dispatchEvent.

jsFiddle hier