jQueryUI does not honour DOM/CSS hierarchy

[bmh_ca]

hen one hovers their mouse over an autocomplete option the element containing the autocompleting input tag is no longer in 'mouseover'ed' and per the CSS rules the input tag disappears with its container. This is not the desired behaviour; I'd like to keep the input tag visible when highlighting the autocomplete selections.

I would hope and expect that it'd be possible to move the autocomplete elements to the DOM next to the input tag (i.e. x = $("#X"); x.append(x.autocomplete('widget'))), and therefore the CSS rules would keep the input and its parent visible. Alas, this doesn't work.

Here's an example: ​http://jsfiddle.net/U2B9f/ Here's a workaround: ​http://jsfiddle.net/U2B9f/1/

See also: ​http://stackoverflow.com/questions/4363080

[Scott González]

Use the appendTo option.

[bmh_ca]

Replying to scott.gonzalez:

Use the appendTo option.

That's brilliant, thanks; I would have appreciated a bit of direction (e.g. to the code -- ​https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.autocomplete.js) because appendTo is not an apparent or documented option of the autocomplete plugin.

[Scott González]

Sorry, I forgot that the docs on jqueryui.com doesn't get updated until we do a release. You can see the documentation for the appendTo option at ​http://docs.jquery.com/UI/Autocomplete#option-appendTo