javascript - 在 Jquery 中单击搜索结果之外的任何位置时隐藏搜索结果

Question

我正在尝试创建 Gmail 风格的搜索栏。基本上是一个搜索栏，允许用户输入搜索结果并在下拉式弹出窗口中显示结果。参见下图。

在此设计中，如果我单击页面中的任意位置，我想隐藏搜索结果。但是，如果我单击搜索结果，我想做一些其他工作(打开一个小的模式弹出窗口，设置一些 session 变量等)。

下面是我想出的设计和事件结构。

<div onfocusout="return HideSearchResultBox(this,event);">
<input type="text" id="MainPageSearchBar" placeholder="Search here..." oninput="return DisplaySearchResult();" onfocus="return DisplaySearchResultBox();"/>
 <div class="card searchresultcard" style="width:100%">
 <div class="card-body p-2" id="searchResultDisplayDiv">
 </div>
 </div>
 </div>

这是我用来生成结果项的代码。

<div id="SearchBarResult' + someID + '" onclick="return OpenSearchResultTab(' + someID + ');">
<label> DisplayText <span class="badge badge-pill badge-accent" style="float:right">Member</span></label>
<label> SubText</label>
</div>

基本上，当主 div(包括搜索框和结果)失去焦点时，我尝试隐藏带有搜索结果的 div，效果很好。

问题是，当我单击搜索结果时，主 div(包括搜索框和结果)的“onfocusout”事件仍然会被触发。因此，如果我单击搜索结果，div 被关闭，并且搜索结果的点击事件永远不会被触发。

我尝试了 stackoverflow 本身的一些建议，比如将“onfocusout”事件移动到主容器 div，或者使用 mouseup 事件。但问题仍然是一样的。我试图找到事件目标，但每次都为空。

编辑:我尝试删除隐藏搜索结果的代码，然后搜索结果项的单击事件工作正常。因此，如果我隐藏搜索结果，则单击事件不会被触发。

Answer 1

当搜索栏失去焦点时，您需要检查鼠标是否在搜索结果内， 尝试如下，

  let flag=false;
//code of on over of search result item
function handleMouseOver(){
 flag=true
}
//code for mouse leave of search result item
function handleMouseLeave(){
 flag=false;
}
//you focus out event of search box
function hadleFocusOut(){
 if(flag){
  //do not hide search result,focus goes to search result item
  //allow user to select search result item
 }else{
  //hide search result
 }
}