Is there an event connected to the choice of a datalist <option>?

Question

I have a (dynamic) list of choices in an <input> field:

<input list="choices">
<datalist id="choices">
<option>one</option>
<option>two</option>
</datalist>

Is there an event fired right after the choice of the <option> is made? (which I would like to catch/use in Vue.js if this matters). This would be when the left button of the mouse is clicked in the scenario below:

Answer 1

Try this. it will check if the value exist in the input box and alert is triggered when you select an option as you have requested

<input list="choices" id="searchbox">
<datalist id="choices">
<option id="one">one</option>
<option>two</option>
</datalist>


$("#searchbox").bind('input', function () {
    if(checkExists( $('#searchbox').val() ) === true){
        alert('item selected')
    }
});

function checkExists(inputValue) {
    console.log(inputValue);

    var x = document.getElementById("choices");
    var i;
    var flag;
    for (i = 0; i < x.options.length; i++) {
        if(inputValue == x.options[i].value){
            flag = true;
        }
    }
    return flag;
}