Event handler for input+datalist

Question

I'd like to use something like this snippet

<input type="text" name="product" list="productName"/>
<datalist id="productName">
    <option value="Pen">Pen</option>
    <option value="Pencil">Pencil</option>
    <option value="Paper">Paper</option>
</datalist>

But I need to run some js code whenever the selection is changed (or the value edited). Is there a way to hook up an event handler for that?

Answer 1

The input event would work. The change event works as well, but it is only triggered when the input element looses focus, not every time the value changes.

document.querySelector('input').oninput = function() {
    console.log(this.value);
};

DEMO