我处于类似的情况，我的另一个问题是阻止datepicker触发父mouseleave ，但该解决方案似乎不适用于jQuery UI自动完成。
hover如何也适用于自动完成的孩子？ 换句话说，如果一个#hoverMe在自动完成建议上， #hoverMe应该保持打开状态。 此外，建议/代码如何处理select #hoverMe之外的选择，同时保持#hoverMe显示，直到一个#hoverMe回来，这将是伟大的！
http://jsfiddle.net/Kzp87/
HTML
hover me arbitrary text JS
$(document).ready(function () { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#autocompletor").autocomplete({ source: availableTags }); var _enter = false; $("#hoverAnchor").add($("#hoverMe")).mouseenter(function () { if (!_enter) { $("#hoverMe").stop(true, false).animate({ height: 'toggle', opacity: 'toggle' }, 200); } _enter = true; }).mouseleave(function () { _enter = false; $("#hoverMe").stop(true, false).animate({ height: 'toggle', opacity: 'toggle' }, 200); }); });
做这样的事情怎么样：
$(document).ready(function () { var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; var _enter = false; $("#autocompletor").autocomplete({ source: availableTags, open: function (event, ui) { //in the event someone types into the input as #hoverMe is closing, this will prevent the list from showing if (!_enter) $('.ui-autocomplete').hide(); } }); $("#hoverAnchor").add($("#hoverMe")).mouseenter(function () { if (!_enter) { $("#hoverMe").stop(true, false).animate({ height: 'toggle', opacity: 'toggle' }, 200); } _enter = true; }).mouseleave(function () { if (!$('.ui-autocomplete').is(':visible') && _enter) { //check if autocomplete is open $("#hoverMe").stop(true, false).animate({ height: 'toggle', opacity: 'toggle' }, 200); _enter = false; } }); });
演示： http ： //jsfiddle.net/dirtyd77/Kzp87/3/
基本上，列表显示在#hoverAnchor并将一直显示，直到鼠标进入并离开input一段时间（但是，我们总是可以更改它）。 我使用open-event来阻止列表显示#hideMe是否不可见。 希望这有帮助，如果您有任何疑问，请告诉我！
如果您希望在将鼠标hover在选项上时自动填充不会消失，您可以使用此选项：
$("ul.ui-autocomplete").appendTo($("div#hoverMe"))
这会将带有选项的列表附加到可以移动的div。 不幸的是，默认情况下，ul的父元素是文档，因此不应用hover。
一旦选择了选项，这将导致自动完成消失。