在Jquery中任何期望在搜索结果上单击的地方时，隐藏搜索结果

Question

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

在这种设计中，如果我单击页面中的任意位置，则要隐藏搜索结果。但是，如果我单击搜索结果，我想做一些其他工作（打开一个小模式弹出窗口，设置一些会话变量等）。

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

<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将关闭，并且搜索结果的click事件将永远不会触发。

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

编辑：我尝试删除隐藏搜索结果的代码，然后搜索结果项的click事件正常运行。因此，如果我隐藏搜索结果，则不会触发click事件。

Answer 1

当搜索栏失去焦点时，您需要检查鼠标是否在搜索结果中，请尝试以下操作，&nbsp; let flag=false;//code of on over of search result itemfunction handleMouseOver(){&nbsp;flag=true}//code for mouse leave of search result itemfunction handleMouseLeave(){&nbsp;flag=false;}//you focus out event of search boxfunction hadleFocusOut(){&nbsp;if(flag){&nbsp; //do not hide search result,focus goes to search result item&nbsp; //allow user to select search result item&nbsp;}else{&nbsp; //hide search result&nbsp;}}