HTML input datalist - event trigger when input value is equals to the option value

Question

I'm trying to make a users dropdown:

<datalist id="list">
      <option value="User_01"></option>
      <option value="User_02"></option>
      <option value="User_03"></option>
</datalist>
<input type="text" list="list" oninput="alert(this.value)"/>

When I type/choose an option from the list, the event "oninput" is triggered.

However, when I write the exact same value inside the input first, and only then click on the option, the event will not trigger.

Is there any way for me to trigger the event even if the input value is the same as the option value?

To make myself clear:

1. Typing "User_01" on the input field.
2. Choosing the "User_01" option.
3. The event is not triggered.

Answer 1

oninput is triggeren only when the value of the input changes. Since you already typed the exact value into the field, it does not change, so there is no event. I found no way to trigger an event when someone selects an option from datalist, that matches the value, but you still can use your oninput event to check if the value matches any of the options.

change the event in your code:

<datalist id="list">
      <option value="User_01"></option>
      <option value="User_02"></option>
      <option value="User_03"></option>
</datalist>
<input type="text" list="list" oninput="checkInput(this.value)"'/>

and add some js to check the value against the list of options:

var options = [].slice.call(document.getElementById("list").options).map( function(option) { return option.value; });

var checkInput = function(value) {
  console.log(options.includes(value));
  console.log(options.indexOf(value));
  if(options.indexOf(value) >= 0) console.info("value match!");
}

jsfiddle: https://jsfiddle.net/sq16vxzo/

includes() gives you simple true/false and indexOf() gives you the index of option matching the current value.

Answer 2

The KeyUp triggers when you either click or hit enter on in the datalist. You just have to tell if it's a KeyboardEvent or an Event (this is the one you want)

You can do that by checking the key property

if(!e.key) { ... }