Perform an action when you click the HTML5 datist option

Question

I am using <datalist>

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

And using AJAX to populate the list

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

However, I can’t get him to perform the action when I click on the selection in the datalist, for example, if I type “Ref F” and the item “Ref flowers” ​​appears if I click on it. need to complete the event.

How can i do this?

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

Answer 1

I apologize for this question, but I had a similar problem and I have a solution that should work for you too.

 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> 

This solution is derived from Stefan Mueller's solution. He must also work with a dynamically populated informant.

It is not surprising that it is impossible to determine whether the user clicked an item from the data catalog or selected it by pressing the tab key or typing the entire line manually.

Answer 2

Due to the lack of events available for the <datalist> elements, there is no choice to select from offers other than viewing input events ( change , input , etc.). Also see My answer here: Determine if an item was selected from an HTML 5 datalist by pressing enter

To check if a selection is selected from the list, you must compare each change with the available options. This means that the event is also triggered when the user enters the exact value manually, so this cannot be stopped.

 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> 

Answer 3

Datalist does not support a click listener, and OnInput is very expensive, each time checking the list of all if something changes.

I used:

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

FocusOut will be launched every time the client clicks on the input text, and then clicks elsewhere. If they clicked the text, and then clicked somewhere else, I assume that they set the desired value.

To check the correctness of the value, you do the same as the 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; } } }