Question

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

悬停如何也适用于自动完成的孩子？换句话说，如果自动填充建议中有一个mouseenter，#hoverMe应该保持打开状态。此外，关于如何处理select #hoverMe之外的选择同时保持#hoverMe显示直到一个mouseenter重新出现的建议/代码将会很棒！

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>

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

Answer 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上，并会一直显示，直到鼠标进入＆amp;将input留出一个额外的时间（但是，我们总是可以改变这一点）。我使用open-event来阻止列表显示#hideMe是否不可见。希望这有帮助，如果您有任何问题，请告诉我们！

Answer 2

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

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

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

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

将父母的悬停应用于jquery ui autocomplete child

2 个答案: