如何在单击数据列表选项列表时触发事件？

Question

I have a datalist that looks like :

 <datalist id="foodlist"> <option value="one" ></option <option value="two" ></option> <option value="three" ></option> </datalist> <input type="text" list="foodlist" autocomplete=true id="inputItem"/>

I want an event to fire when user selects on of the option in the list using JavaScript.

How to achieve it?

onClick, onChange does not seem to work.

Answer 1

I know this is kind of old, but I thought I should document it somewhere. If you're trying to detect input from a dropdown selection rather than a click per se, you can use the "input" event and check the type of the passed event object - cut/paste/keypress input will pass an "InputEvent" object, whereas a datalist selection will pass a generic "Event" object.

 var textbox = document.getElementById("inputItem"); textbox.addEventListener("input", function(e){ var isInputEvent = (Object.prototype.toString.call(e).indexOf("InputEvent") > -1); if(!isInputEvent) alert("Selected: " + e.target.value); }, false);

 <datalist id="foodlist"> <option value="one" ></option> <option value="two" ></option> <option value="three" ></option> </datalist> <input type="text" list="foodlist" autocomplete=true id="inputItem"/>

Answer 2

<datalist id="foodlist">    
    <option value="one" ></option>
    <option value="two" ></option>
    <option value="three"></option> 
</datalist>

<input id="txt" type="text" list="foodlist" autocomplete=true id="inputItem"/>

document.getElementById('txt').addEventListener('input', function () {
    console.log('changed'); 
    var val = document.getElementById("txt").value;
    alert(val);
});

The datalist tag is only supported in some browsers. Here's simple trick to get selected value.

Answer 3

While this is 4 years old, I stumbled across it today, and ran into the cross browser issues that others have reported. I was able to solve this by listening to the keyup event on the input field, and then checking the event type.

<input type="text" name="field_name" id="field_id" list="fields_list">
<datalist id="fields_list"></datalist>

<script>
var fieldInput = document.getElementById("field_id");

fieldInput.addEventListener('keyup', function(e) { if (isKeyboardEvent(e)) { myFunction(); } });

function isKeyboardEvent(e) {
    return (e instanceof KeyboardEvent);
}

function myFunction() {
   /* function that does something only on keyboard input */
}
</script>

Actual key strokes will be KeyboardEvent while a datalist option click will be simply be an Event .

Confirmed working in Chrome, Firefox, and Edge.