javascript - 单击 Jquery 中搜索结果的任何位置时隐藏搜索结果
问题描述
我正在尝试创建一个 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 事件。
解决方案
当搜索栏失去焦点时,您需要检查鼠标是否在搜索结果内,尝试如下,
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
}
}
推荐阅读
- python - Matplotlib 中的数据分箱并使用分箱数据绘制多重性分布图
- php - 如何解决一般错误:1215(无法添加外键约束)
- google-cloud-platform - 更改 Google Compute Engine 的外部 IP 地理位置
- java - 等效于 NodeJS 的 Java AES-256 和 RSA 混合加密
- javascript - div内的Bootstrap触发器Dropdown给出错误
- android - 延迟触发的协程 GlobalScope
- sequelize.js - 使用 sequelize 插入时如何填充数据库默认值?
- facebook - 为什么显示“handleWindowVisibility:令牌 android.os.BinderProxy@c63b265 没有活动”?
- android - 在 Android Studio for Kotlin 中为视图创建代码检查
- r - 如何从使用 R 包 MICE 运行的模型中获取拟合值