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•2y ago

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

Jochem•2y ago

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

Mannix•2y ago

I did only small testing so I might be wrong 🙂

Jochem•2y ago

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

WillsterJohnsonOP•2y ago

thanks, I'll give it a go

MarkBoots•2y 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