Esegui un’azione quando fai clic sull’opzione del datalist HTML5

Sto usando un

  

E usando AJAX per compilare la lista

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

Tuttavia non riesco a farlo eseguire un’azione quando faccio clic su una selezione nel datalist, ad esempio se scrivo “Ref F” e l’elemento “Ref flowers” compare, se clicco su di esso ho bisogno di eseguire un evento.

Come posso fare questo?

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

Scusa per aver trovato questa domanda, ma ho avuto un problema simile e ho una soluzione, che dovrebbe funzionare anche per te.

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

A causa della mancanza di eventi disponibili per gli elementi , non c’è modo di selezionare i suggerimenti oltre a guardare gli eventi di input ( change , input , ecc.). Vedi anche la mia risposta qui: Determina se un elemento è stato selezionato dal datalista HTML 5 premendo il tasto Invio

Per verificare se una selezione è stata selezionata dall’elenco, è necessario confrontare ciascuna modifica con le opzioni disponibili. Ciò significa che l’evento si triggers anche quando un utente immette manualmente un valore esatto, non c’è modo di fermarlo.

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

Datalist non supporta il listener dei clic e OnInput è molto costoso, controllando ogni volta l’elenco se qualcosa cambia.

Quello che ho fatto è stato usare:

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

FocusOut verrà triggersto ogni volta che un client fa clic sul testo di input e fa clic su qualsiasi altro punto. Se hanno fatto clic sul testo, poi hanno cliccato altrove, presumo abbiano messo il valore che volevano.

Per verificare se il valore è valido fai lo stesso dell’input:

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