Determine if an element was selected from HTML 5 datalist by pressing enter key

Question

jQuery(document.body).on('input', '.icdCodeInput', function (event) {

});

I have a HTML 5 datalist with class icdCodeInput. When I select an item from the list by either using mouse or by pressing enter, the above event gets fired. How can I differentiate inside the event if the item was selected by hitting enter key ?

Answer 1

Unfortunately, this is currently not possible at all. The input event is only fired once the value inside the input actually changes, which always comes after making your selection. The event does not hold information on how this was added.

An alternative would be to track the actual click or keypress events. However, neither the click event nor any of the keypress events seem to be fired when using the datalist (at least not in Chrome). Even if you bind them on the document or body, clicks or keypresses simply do not register when performed on the actual datalist.

As such, it is impossible to tell the difference between these methods of selecting a datalist option.