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?

Have you looked into the [`change`](https://developer.mozilla.org/en-US/docs/XUL/Attribute/onchange) event? — Aiias, Apr 06 '14 at 00:28
@Aiias, that's the behaviour I want, but it doesn't apply to `` — John La Rooy, Apr 06 '14 at 00:31

Felix Kling · Accepted Answer · 2014-04-06T01:08:46.963

4

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

edited Apr 06 '14 at 01:08

answered Apr 06 '14 at 01:00

Felix Kling

795,719
175
1,089
1,143

It seems to fire all the time on chrome (when I click on an item or type a key). Maybe other browsers work differently? I should be able to work with this. – John La Rooy Apr 06 '14 at 01:05
Well, it fires when the input changes. In contrast, the change event only fires when the input looses focus and the value changed. – Felix Kling Apr 06 '14 at 01:07
Oh right, I just didn't read your answer properly :) I guess you made those bits bold for me – John La Rooy Apr 06 '14 at 01:13
I did :) I figured it might not be clear if one just quickly reads over it. – Felix Kling Apr 06 '14 at 01:14

Event handler for input+datalist

1 Answers1