Javascript 单击搜索结果div时停止聚焦

这是指本手册中的代码：

我正在尝试创建一个搜索框，其中包含一个结果列表，当用户输入某个内容时会弹出该列表。我遇到的问题是，当用户单击输入元素以外的任何位置时，搜索结果列表将关闭。我将focusout事件附加到父DIV，但即使将其附加到输入，我也会得到相同的行为。我想要的是用户能够选择列表上的滚动条，而不是让列表消失。如果他们在输入或列表之外单击，则列表应关闭

现在，无论他们在哪里单击，它都会关闭，除非它在输入中

编辑：performSearch函数体包装在AJAX请求中

解决方案：我终于弄明白发生了什么。您需要绑定到mousedown事件并返回false，以便允许在下拉列表中选择滚动条。这最终给了我解决办法

$target.on('mousedown',function (event) {
            return false;
        });

下面是代码：

var搜索={
关闭：空，
性能研究：功能（元素，e）{
变量$this=$（elem）；
var$target=$（“#搜索结果”）；
如果（$target.length==0）{
$target=$（''）；
$target.insertAfter（$this）；
var p=$this.position（）；
$target.css（'top'，（p.top++$this.height（）+15）+'px'）；
$target.css（'width'，（$this.width（）+p.left+10）+'px'）；
$target.css（'width'，（$this.width（）+25）+'px'）；
$target.css（'left'，（p.left）+'px'）；
$target.slideDown（'fast'，function（）{
$target.css（'overflow'，'auto'）；
});
$target.on（'mouseover'，'.sb row'，function（）{
$（elem）.addClass（'sb-active'）；
$（'sb-active'）.removeClass（'sb-active'）；
});
$target.on（'click'，'sb row'，search.click'）；
//$target.parent（）.on（'focusin focusout'，search.listFocus'）；
}否则{
$target.empty（）；
$target.slideDown（'fast'，function（）{
$target.css（'overflow'，'auto'）；
});
}
对于（i=0；i<40；i++）{
var html=[]；
html.push（“”）；
html.push（“”）；
html.push（“”）；
var$out=$（html.join（“”））；
$target.append（$out）；
}
},
延迟关闭：功能（e）{
console.log（'delayClose'）；
var self=这个；
log（'results focused:'+$（'#search results'）。是（':focus'）；
log（'div-focused:'+$（'#parent'）。是（':focus'）；
search.closing=window.setTimeout（函数（）{
search.close.apply（self，arguments）；
}, 1000);
},
listFocus：函数（e）{
console.log（e.type）；
var self=这个；
窗口.clearTimeout（搜索.关闭）；
},
点击：功能（e）{
console.log（'clicked'）；
},
关闭：功能（e）{
console.log（“关闭”）；
窗口.clearTimeout（搜索.关闭）；
var$this=$（this）；
$（“#搜索结果”）.slideUp（'fast'）；
}
};
$（文档）.ready（函数（）{
$searchBox=$（“#搜索”）；
$searchBox.on（'focus'，函数（e）{
这个值=“”；
这是select（）；
e、 停止传播（）；
返回false；
});
$searchBox.on（'keyup'，函数（e）{
search.performSearch（$searchBox[0]，e）；
});
$searchBox.parent（）.on（'focusout'，search.delayClose）；
});
.sb列表{
位置：绝对位置；
宽度：250px；
排名：0；
左：0；
高度：300px；
背景：#FAFAFA；
边框：实心1px#999；
边界顶部：无；
显示：无；
溢出：自动；
z指数：92592；
-webkit盒阴影：0 2px 2px#999999；
-moz盒阴影：0 2px 2px#999999；
-ms盒影：0 2px 2px#999999；
盒影：0 2px 2px#999999；
}
您这里有一些故障代码，需要修复多个问题。如果检查
#search
（输入框），您将看到输入的每个字符的搜索结果都会以相加的方式显示。也就是说，您将得到多个
id=“搜索结果”
元素

对于这个单一错误，一个非常简单的单行解决方案是添加
$（“#搜索结果”）.remove（）到您的
performSearch
处理程序函数：

performSearch: function (elem, e) {
    $('#search-results').remove();
    // ...
}

我创建了一个来演示它的功能以及由此带来的额外不便和错误，其中之一是当您单击
#搜索结果
下拉列表本身时缺少正确的事件处理

我建议您尝试使用开发人员工具或Javascript调试器跟踪搜索代码中的错误源，因为代码中有许多部分需要修复或重新思考；对于单个答案来说太多了。
一个如何？您提供的JSFIDLE代码段没有这个问题（下拉列表不会消失），但也不会自动关闭。您是否正在寻找在单击外部时关闭下拉列表的功能？还是在点击下拉菜单时保持输入焦点的下拉菜单？@JánosWeisz我希望当你点击它或输入的
外部时下拉菜单关闭，但当你点击它或输入的
内部时，下拉菜单关闭。很抱歉，在我将其传输到JSFIDLE时忘记了一些代码。更新了我的问题。