web-dev-qa-db-fra.com

Effectuer une action en cliquant sur l'option datalist HTML5

J'utilise un <datalist>

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

Et en utilisant AJAX pour remplir la liste

 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();
}

Cependant, je ne parviens pas à exécuter une action lorsque je clique sur une sélection dans le datalist, par exemple si je tape "Ref F" et que l'élément "Ref flowers" apparaît, si je clique dessus, je dois exécuter un évènement.

Comment puis-je faire ceci?

option.addEventListener("click", function() {
option.addEventListener("onclick", function() {
option.addEventListener("change", function() {
javascripthtml5dom-eventshtml-datalist
11
Hobbyist

Désolé de creuser cette question, mais j'ai un problème similaire et une solution, cela devrait fonctionner pour vous aussi.

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>

Cette solution est dérivée de la solution de Stephan Mullers. Cela devrait également fonctionner avec un datalist dynamiquement peuplé.

Malheureusement, il n’existe aucun moyen de savoir si l’utilisateur a cliqué sur un élément du dataliste ou s’est sélectionné en appuyant sur la touche de tabulation ou en saisissant manuellement la chaîne entière.

19
chillichief

En raison du manque d'événements disponibles pour les éléments <datalist>, il est impossible de sélectionner des suggestions autres que de regarder les événements de input (change, input, etc.). Voir aussi ma réponse ici: Déterminez si un élément a été sélectionné dans HTML 5 datalist en appuyant sur la touche Entrée

Pour vérifier si une sélection a été sélectionnée dans la liste, comparez chaque modification aux options disponibles. Cela signifie que l'événement sera également déclenché lorsqu'un utilisateur entre une valeur exacte manuellement, il n'y a aucun moyen de l'arrêter.

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 ne prend pas en charge les écouteurs de clics et OnInput est très coûteux, vérifiant à tout moment toute la liste si quelque chose change. 

Ce que j'ai fait utilisait:

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

FocusOut sera déclenché à chaque fois qu'un client clique sur le texte saisi et ensuite n'importe où. S'ils ont cliqué sur le texte, puis cliqué ailleurs, je suppose qu'ils ont mis la valeur qu'ils voulaient.

Pour vérifier si la valeur est valide, procédez de la même manière que l'entrée:

   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