webentwicklung-frage-antwort-db.com.de

Führen Sie eine Aktion aus, wenn Sie auf die Option HTML5-Datenliste klicken

Ich verwende einen <datalist>

<datalist id="items"></datalist>

Und mit AJAX die Liste auffüllen

 function callServer (input) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
            //return the JSON object
            console.log(xmlhttp.responseText);
            var arr = JSON.parse(xmlhttp.responseText);
            var parentDiv = document.getElementById('items');
            parentDiv.innerHTML = "";
            //fill the options in the document
            for(var x = 0; x < arr.length; x++) {
                var option = document.createElement('option');
                option.value = arr[x][0];
                option.innerHTML = arr[x][1];
                //add each autocomplete option to the 'list'
                option.addEventListener("click", function() {
                  console.log("Test");
                });
                parentDiv.appendChild(option);
            };

        }
    }
    xmlhttp.open("GET", "incl/search.php?value="+input.value, true);
    xmlhttp.send();
}

Ich kann es jedoch nicht veranlassen, eine Aktion auszuführen, wenn ich im datalist auf eine Auswahl klicke, zum Beispiel, wenn ich "Ref F" eingebe und der Eintrag "Ref flowers" erscheint, wenn ich darauf klicke, muss ich sie ausführen ein Event.

Wie kann ich das machen?

option.addEventListener("click", function() {
option.addEventListener("onclick", function() {
option.addEventListener("change", function() {
11
Hobbyist

Tut mir leid, dass ich diese Frage aufgreife, aber ich hatte ein ähnliches Problem und habe eine Lösung, die auch für Sie funktionieren sollte.

function onInput() {
    var val = document.getElementById("input").value;
    var opts = document.getElementById('dlist').childNodes;
    for (var i = 0; i < opts.length; i++) {
      if (opts[i].value === val) {
        // An item was selected from the list!
        // yourCallbackHere()
        alert(opts[i].value);
        break;
      }
    }
  }
<input type='text' oninput='onInput()' id='input' list='dlist' />

<datalist id='dlist'>
  <option value='Value1'>Text1</option>
  <option value='Value2'>Text2</option>
</datalist>

Diese Lösung leitet sich von der Lösung von Stephan Mullers ab. Es sollte auch mit einem dynamisch bevölkerten Datalisten funktionieren.

Leider gibt es keine Möglichkeit festzustellen, ob der Benutzer auf ein Element in der Dataliste geklickt oder es durch Drücken der Tabulatortaste ausgewählt oder die gesamte Zeichenfolge von Hand eingegeben hat.

19
chillichief

Da für <datalist>-Elemente keine verfügbaren Ereignisse vorhanden sind, besteht keine Möglichkeit, aus den Vorschlägen eine Auswahl zu treffen, außer die Ereignisse der input (change, input usw.) anzusehen. Siehe auch meine Antwort hier: Bestimmen Sie, ob ein Element aus der HTML 5-Datenbank ausgewählt wurde, indem Sie die Eingabetaste drücken.

Um zu überprüfen, ob eine Auswahl aus der Liste ausgewählt wurde, sollten Sie jede Änderung mit den verfügbaren Optionen vergleichen. Dies bedeutet, dass das Ereignis auch ausgelöst wird, wenn ein Benutzer manuell einen genauen Wert eingibt. Dies kann nicht abgebrochen werden.

document.querySelector('input[list="items"]').addEventListener('input', onInput);

function onInput(e) {
   var input = e.target,
       val = input.value;
       list = input.getAttribute('list'),
       options = document.getElementById(list).childNodes;

  for(var i = 0; i < options.length; i++) {
    if(options[i].innerText === val) {
      // An item was selected from the list!
      // yourCallbackHere()
      alert('item selected: ' + val);
      break;
    }
  }
}
<input list="items" type="text" />
<datalist id="items">
  <option>item 1</option>
  <option>item 2</option>
</datalist>

7
Stephan Muller

Datalist unterstützt keinen Click-Listener, und OnInput ist sehr kostspielig und prüft jedes Mal, wenn sich etwas in der Liste ändert. 

Was ich gemacht habe war:

document.querySelector('#inputName').addEventListener("focusout", onInput);

FocusOut wird jedes Mal ausgelöst, wenn ein Client auf den Eingabetext klickt und dann an eine andere Stelle klickt. Wenn sie auf den Text geklickt haben, dann klickten sie an eine andere Stelle und ich gehe davon aus, dass sie den gewünschten Wert angeben.

Um zu überprüfen, ob der Wert gültig ist, machen Sie dasselbe wie die Eingabe:

   function onInput(e) {
        var val = document.querySelector('#inputName').value;
        options = document.getElementById('datalist').childNodes;
        for(var i = 0; i < options.length; i++) {
             if(options[i].innerText === val) {
                  console.log(val);
                  break;
             }
        }
    }
0
Dinidiniz