CODEWITHSUNDEEP
javascripthtmldomhtml-datalist
John La Rooy
John La Rooy

Reputation: 304215

Event handler for input+datalist

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?

Upvotes: 3

Views: 3584

Answers (1)

Felix Kling
Felix Kling

Reputation: 816472

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

Upvotes: 4

Related Questions