know when datalist option was selected

assume I have the following;

<input type="text" list="mylist">
<datalist id="mylist">
  <option value="a">
  <option value="b">
</datalist>

<input type="text" list="mylist">
<datalist id="mylist">
  <option value="a">
  <option value="b">
</datalist>

How can I differentiate selecting the option a vs the user manually typing a into the input? Is there a separate event to listen for, or maybe some additional data on the input elements input or change events?

6 Replies

Mannix•17mo ago

change will trigger when you select not when you type something in 🙂 input triggers in both cases

Jochem•17mo ago

I thought change would still fire on blur if you've changed the value?

Mannix•17mo ago

I did only small testing so I might be wrong 🙂

Jochem•17mo ago

I didn't do any tbh 😄 I just vaguely remember using change for that an Age ago

WillsterJohnson•17mo ago

thanks, I'll give it a go

MarkBoots•17mo ago

"input" should trigger when typing

<input type="text" list="mylist" oninput="console.log(this.value)">
<datalist id="mylist">
  <option value="a">
  <option value="b">
</datalist>

<input type="text" list="mylist" oninput="console.log(this.value)">
<datalist id="mylist">
  <option value="a">
  <option value="b">
</datalist>

Gaming

Programming

know when datalist option was selected