将父母的悬停应用到jquery ui自动完成的孩子 [英] apply parent's hover to jquery ui autocomplete child

问题描述

我在一个类似的情况我的其他问题的防止datepicker触发父级mouseleave ，但该解决方案似乎不适用于jQuery UI自动完成。

悬停如何应用于自动填充孩子？换句话说，如果一个自动填充建议 #hoverMe 应该保持打开状态，那么 mouseenter 此外，关于如何处理选择 #hoverMe 之外的选择，同时保持<$ c $的建议/代码c> #hoverMe 显示，直到一个 mouseenter s会很棒！

http://jsfiddle.net/Kzp87/

html

 < div id =hoverAnchor> hover me< / div> 
< div id =hoverMestyle =display：none>任意文本
< input type =textid =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）{
 $（＃ 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）{
 //在某人在输入时输入#hoverMe正在关闭，这将阻止列表显示
 if （！_enter）$（'。ui-autocomplete'）。hide（）; 
} 
}）; 
 
 $（＃hoverAnchor）。add（$（＃hoverMe））。mouseenter（function（）{
 if（！_enter）{
 $（ #hoverMe）stop（true，false）.animate（{
 height：'toggle'，
 opacity：'toggle'
}，200）; 
} $ b $（'。ui-autocomplete'）。is（'：visible'）&& _enter）{（$ b_enter = true; 
}）。mouseleave（function（）{
 if //检查自动完成是否打开
 $（＃hoverMe）。stop（true，false）.animate（{
 height：'toggle'，
 opacity：'toggle'
}，200）; 
 _enter = false; 
} 
}）; 
}）; 
  

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

基本上，列表显示 #hoverAnchor 并且将保持显示，直到鼠标进入&留下输入一个额外的时间（但是，我们可以随时更改）。我使用了 开放事件 以防止 #hideMe 不可见时显示列表。希望这有帮助，并让我知道如果您有任何问题！

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

解决方案

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!

这篇关于将父母的悬停应用到jquery ui自动完成的孩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！