I'm using jQueryUI's autocomplete, but for the following reasons I'd like to move the search results into the DOM next to the input tag that's doing the search.
It's easiest to see this on jsFiddle, but essentially code demonstrating the issue looks like so:
<html> <head>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/flick/jquery-ui.css" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript"> google.load("jquery", "1.4");
google.load("jqueryui", "1.8"); </script>
<script>
$(function() {
$("#X").autocomplete({
source: ['abc', 'def', 'ghi']
});
});
</script>
<style type="text/css">
.B { display: none; }
.A:hover .B { display: block; }
</style>
</head> <body>
Hello
<div class='A'>
select:
<div class='B'>
<input id='X' />
</div>
</div>
World
</body> </html>
The problem is that when 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.
I'd be grateful for any thoughts on how to achieve this mixture of CSS and jQueryUI.
Thank you.
Brian