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

Question

I am trying to create a Gmail style search bar. Basically a search bar which allows user to type search result and display the result in a dropdown style popup. See image below.

In this design, if I click anywhere in the page, I want to hide the search results. But if I click on the search results, I want to instead do some other work (opening a small modal popup, set some session variables etc).

Below is the design and event structure I came up with.

<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>

Here is the code I used to generate the result items.

<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>

Basically, I am trying to hide the div with the search results when the main div (including the search box and the results) loses focus, which works fine.

Problem is that when I click on the search results, the "onfocusout" event of the main div (including the search box and the results) still gets fired. So, if I click on a search result, div is closed and the click event of the search result never gets fired.

I tried few suggestions from stackoverflow itself, that I could find, like moving the "onfocusout" event to the main container div, or using mouseup event. But the problem remains the same. I tried to find event target but that comes as null everytime.

Edit: I tried removing the code that hides the search result, and then the click event for search result items work fine. So, if I hide the search result, then click event is not getting fired.

Answer 1

you will need to check does mouse is inside the search result when search bar lose the focus, try as follow,

  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
 }
}

Answer 2

You need to check if clicked outside of search area.

 $(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> 

Answer 3

In the above, example is a clear instruction to the search DOM element that once the focus is lost close the Search div. Need to change the approach to achieve the desired functionality.

One way could be, add an event handler on the document body and check if the click event is triggered not from search results then close the search container.

Hope this helps.