javascript - 隐藏由 onkeyup 事件显示的 div（在外部单击时隐藏）

Question

我的 HTML 代码如下：

<div style="float:right;">
    <form>
     <input id="search" onkeyup="lookup(this.value);" type="text" />
    </form>
    <div style="position:relative;">
       <div id="suggestions" style="position:absolute;"></div>
    </div>
</div>

我的 jQuery 代码如下：

$("#search").blur(function(){
   $('#suggestions').fadeOut();
});

我的 JavaScript 代码如下：

function lookup(inputString)
{
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
    } else {
        $.post("/ajax/search/", {queryString: ""+inputString+""}, function(data) { 
            $('#suggestions').fadeIn();
            $('#suggestions').html(data);
        });
    }
}

我尝试了以下但没有奏效：

$(document.body).click(function(){
   if (!$('#suggestions').has(this).length) {
    $('#suggestions').hide();
    }
}); 

我的问题是当我在div#suggestions外部单击时如何隐藏 a 。#suggestions现在它只有在#search 中没有字符时才会消失

Answer 1

不要在文档内做任何检查点击：

$(document).click(function () {
    $('#suggestions').hide();
}); 

如果您还希望在suggestions单击 div 时使项目可见，请添加以下内容：

$('#suggestions').click(function(e) {
   e.stopPropagation();
});

这是一个演示小提琴

Answer 2

尝试这个

$('html').click(function(e){
   if (!($(e.target).is('#suggestions'))&&($(e.target).closest('#suggestions').length==0)) {
    $('#suggestions').hide();
    }
});