2

我处于类似情况，我的另一个问题阻止 datepicker 触发父 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);
    });
});
4

2 回答 2

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额外的时间（但是，我们总是可以更改它）。我使用open-event来防止列表显示是否#hideMe不可见。希望这会有所帮助，如果您有任何问题，请告诉我！

于 2013-04-24T17:08:29.350 回答
0

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

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

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

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

于 2013-04-24T17:06:01.290 回答