将父母的悬停应用于jquery ui自动完成子项答案

【问题标题】：apply parent's hover to jquery ui autocomplete child将父母的悬停应用于jquery ui自动完成子项
【发布时间】：2013-04-24 16:38:10
【问题描述】：

我的另一个问题 prevent datepicker from triggering parent mouseleave 与我的情况类似，但该解决方案似乎不适用于 jQuery UI 自动完成。

悬停如何也适用于自动完成子项？换句话说，如果有一个mouseenters 在自动完成建议上，#hoverMe 应该保持打开状态。此外，关于如何处理 select 选择在 #hoverMe 之外的选择同时保持 #hoverMe 显示直到 mouseenters 回来的建议/代码会很棒！

http://jsfiddle.net/Kzp87/

html

<div id="hoverAnchor">hover me</div>
<div id="hoverMe" style="display:none">arbitrary text
    <input type="text" id="autocompletor"></div>
</div>

$(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);
    });
});

【问题讨论】：

您希望在选择项目后关闭自动完成功能吗？或者，理想情况下，您希望发生什么？解决这个问题的方法很少。
@Dom 我编辑了。基本上，悬停选择应保持#hoverMe 显示。当select选择#hoverMe之外的选择时，我还没有真正决定行为...

标签： jquery hover mouseevent parent-child jquery-autocomplete

【解决方案1】：

做这样的事情怎么样：

$(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（但是，我们总是可以更改此设置）。如果#hideMe 不可见，我使用open-event 来阻止列表显示。希望这对您有所帮助，如果您有任何问题，请告诉我！

【讨论】：

非常感谢 dom！
@JoeCoderGuy 确定！如果您还需要什么，请告诉我！

【解决方案2】：

如果您希望将鼠标悬停在选项上时自动完成不会消失，您可以使用：

$("ul.ui-autocomplete").appendTo($("div#hoverMe"))

这会将带有选项的列表附加到可悬停的 div 中。不幸的是，默认情况下 ul 的父元素是文档，因此不会应用悬停。

一旦选择了一个选项，这将导致自动完成功能消失。

【讨论】：