apply parent's hover to jquery ui autocomplete

Question

I'm in a similar situation a my other problem prevent datepicker from triggering parent mouseleave, but that solution doesn't seem to apply to jQuery UI autocomplete.

How can the hover also apply to autocomplete children? In other words, if one mouseenters on an autocomplete suggestion, #hoverMe should stay open. Also, suggestion/code on how to handle selecting a selection that's outside of #hoverMe while keeping #hoverMe shown until one mouseenters back in would be great!

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

If you want the autocomplete not to vanish when you hover over the options you could use this:

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

This will append the list with the options to the div that is hoverable. Unfortunately by default the parent element of the ul is the document so the hover is not applied.

This will cause the autocomplete to vanish once an option has been selected.

Answer 2

How about doing something like this:

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

DEMO: http://jsfiddle.net/dirtyd77/Kzp87/3/

Basically, the list shows on #hoverAnchor and will remain showing until the mouse enters & leaves the input an additional time (however, we can always change this). I used the open-event to prevent the list from showing if #hideMe is not visible. Hope this helps and let me know if you have any questions!