我正在使用jQueryUI自动完成,但出于以下原因,我希望将搜索结果移动到执行搜索的输入标签旁边的DOM中。
可以在jsFiddle上看到这一点,但基本上演示该问题的代码如下:
<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>
问题在于当鼠标悬停在自动完成选项上时,包含自动完成输入标签的元素不再处于“mouseover”状态,并且根据CSS规则,输入标签会随其容器一起消失。这不是期望的行为;我希望在突出显示自动完成选项时保持输入标签可见。
我希望并期望将自动完成元素移动到输入标签旁边的DOM中(即
x = $(“#X”); x.append(x.autocomplete('widget'))
),因此CSS规则将保持输入及其父容器可见。然而,这并不起作用。我将感激任何有关如何实现CSS和jQueryUI混合的想法。
谢谢。
布莱恩