单击 Jquery 中搜索结果的任何位置时隐藏搜索结果答案

【问题标题】：Hide search results when clicked anywhere expect on search results in Jquery单击 Jquery 中搜索结果的任何位置时隐藏搜索结果
【发布时间】：2019-04-08 14:19:40
【问题描述】：

我正在尝试创建一个 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 被关闭并且搜索结果的点击事件永远不会被触发。

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

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

【问题讨论】：

请点击[<>] sn-p 编辑器并提供minimal reproducible example

标签： javascript jquery html

【解决方案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
 }
}

【讨论】：

谢谢。这就是我所缺少的。在鼠标悬停时设置标志是找出事件目标的最简单方法。

【解决方案2】：

您需要检查是否在搜索区域之外点击。

$(document).on("click touchstart", function(e) {
  var t = $(e.target).closest('#SearchBoxContainer');
  var exceptDiv = $('#SearchBoxContainer');
  if (exceptDiv.is(t) == false) {
    //clicked oustide of div
    $('#searchResultDisplayDiv').hide();
  }
});

function DisplaySearchResultBox() {
  $('#searchResultDisplayDiv').show();
}

function doSomething() {
  alert('Do Something');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="SearchBoxContainer">

  <input type="text" onfocus="DisplaySearchResultBox();">
  <div class="" id="searchResultDisplayDiv" style="display: none;">
    <ul style="background:#ccc">
      <li onclick="doSomething()">This is search Result</li>
      <li onclick="doSomething()">This is search Result</li>
      <li onclick="doSomething()">This is search Result</li>
      <li onclick="doSomething()">This is search Result</li>
      <li onclick="doSomething()">This is search Result</li>
      <li onclick="doSomething()">This is search Result</li>
      <li onclick="doSomething()">This is search Result</li>
    </ul>
  </div>
</div>

【讨论】：

【解决方案3】：

在上面，示例是对搜索 DOM 元素的明确指示，即一旦失去焦点，关闭搜索 div。需要改变方法来实现所需的功能。

一种方法是，在文档正文上添加一个事件处理程序，并检查单击事件是否不是从搜索结果触发的，然后关闭搜索容器。

希望这会有所帮助。

【讨论】：