Javascript Jquery blur（）对输入和div的影响

因此，我正在构建一个带有自动建议框的输入字段，该框根据用户对该字段的部分输入建议内容。有点像堆栈上的标签框。“自动建议”框绝对位于输入字段的正下方，仅在用户开始键入文本时才会显示

我想在输入字段模糊时，也就是当用户单击站点上的任何其他位置时，使框消失。通常，我会使用jquery的

blur（）

函数隐藏自动建议框。问题是，如果我这样做，用户将无法从自动建议框中选择任何内容，因为这将模糊输入字段并隐藏自动建议框。我需要找到一种方法来隐藏自动建议框，如果用户单击除输入字段或自动建议框以外的任何位置。你知道我如何使用jquery设置它吗

设想它是这样设置的：

<div id="auto_suggest">
<ul>
<li>Jane</li>
<li>john</li>
</ul>
</div>

<input type="text">

简
约翰

使用超时

$("input, #auto_suggest, #auto_suggest a").blur(function() {
   $('#auto_suggest').addClass('hiding');
    setTimeout(function(){
        $('#auto_suggest.hiding').hide();
    },1000);
}).focus(function() {
   $('#auto_suggest').removeClass('hiding').show();
});

$('#auto_suggest, #auto_suggest a').focus(function() {
   $('#auto_suggest').removeClass('hiding').show();
});​

已更新，可以很好地使用选项卡或单击：

使用超时

$("input, #auto_suggest, #auto_suggest a").blur(function() {
   $('#auto_suggest').addClass('hiding');
    setTimeout(function(){
        $('#auto_suggest.hiding').hide();
    },1000);
}).focus(function() {
   $('#auto_suggest').removeClass('hiding').show();
});

$('#auto_suggest, #auto_suggest a').focus(function() {
   $('#auto_suggest').removeClass('hiding').show();
});​

已更新，可以很好地使用选项卡或单击：

---

当他单击自动完成框中的链接时，会模糊输入，并在实际单击落在框中的目标之前删除自动完成框。此解决方案工作正常，无需定义或清除超时；setTimeout不是setInterval。@iambriansreed如果用户点击链接怎么办？更新了它@KevinB很抱歉忽略了你的答案。当他单击自动完成框中的链接时，会模糊输入并在实际单击落在框内目标之前删除自动完成框。此解决方案工作正常，无需定义或清除超时；setTimeout不是setInterval。@iambriansreed如果用户点击链接怎么办？更新了它@KevinB很抱歉占据了你的答案。