Get current value from datalist onhover

Question

I'm trying to get the current value of the hovered element of a datalist. So if I open the datalist with values in it and just move my mouse over them, I want the values to appear in the console.

This is my attempt:

<input list="browsers" id="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>

$("#browsers").on("mouseover", function() {
  console.log($(this).value());
});

And here is a fiddle: https://jsfiddle.net/sshcvr5q/

There is not `mousover, hover` events for HTML datalist tag according to MDN and W3 — Mike, Mar 09 '16 at 18:28

score 4 · Accepted Answer · edited May 23 '17 at 12:07

4

I'm not sure this is going to be possible. Datalist options, whilst still visible in the main document DOM tree, get cloned and encapsulated as part of a Shadow DOM tree, and as aren't accessible from the parent document. It is these encapsulated Shadow DOM nodes that you're actually hovering over (certainly in Chrome anyway), and the original node in the main DOM tree does not get triggered with a mouseover or hover event when you hover over the Shadow DOM nodes.

If you use Chrome DevTools to inspect the DOM tree in your JSFiddle example, you can see the Shadow Root of the encapsulated DOM tree:

See this explanation from another Stack Overflow question for further information about why you can't listen for events on the Shadow DOM from the parent document.

edited May 23 '17 at 12:07

Community

1
1

answered Mar 09 '16 at 14:41

toomanyredirects

1,972
15
23

What chrome version are you using? I didn't see `#shadow-root (user-agent)` in my chome dev tool.. – Z.Z. Mar 09 '16 at 14:50
@Z.Z. Version 48.0.2564.116 (64-bit) – toomanyredirects Mar 09 '16 at 14:52
You may need to turn on Shadow DOM visibility in Chome DevTools' settings actually, see [here](https://developer.chrome.com/devtools/docs/settings) – toomanyredirects Mar 09 '16 at 14:58
Thanks:) I didn't know there is a setting for that – Z.Z. Mar 09 '16 at 16:07
No problem, if my answer solves your question, please accept it :-) – toomanyredirects Mar 09 '16 at 16:54

score -1 · Answer 2 · answered Mar 09 '16 at 14:33

-1

I think you have to check $("#browser") and not $("#browsers")

But anyway you will receive the value on onchange better :)

Regards

answered Mar 09 '16 at 14:33

Ackman303

74
7

Get current value from datalist onhover

2 Answers2

Linked