Javascript 如何通过单击外部输入和div本身来隐藏div

我有一个自动完成的

搜索框

，我想添加一个功能，这样当我用结果单击

输入

或

div

之外的某个地方时，结果将被隐藏。我有一些想法，但失败了。有没有办法解决这个问题

以下是指向搜索框的链接：

---

我在那个代码笔的javascript末尾添加了这个

//<div class="wrapper">
document.onload=myfunc();
function myfunc(){
  document.addEventListener("click",function closeAutoComplete(){
    searchWrapper.classList.remove("active"); //hide autocomplete box 
  }
  )
  
}

//
document.onload=myfunc（）；
函数myfunc（）{
document.addEventListener（“单击”，函数closeAutoComplete（）{
searchWrapper.classList.remove（“active”）；//隐藏自动完成框
}
)
}

为了隐藏结果下拉列表，您可以将单击事件绑定到html/body

document.addEventListener("click", function(event) {
  // here you can use event.target to exclude some conditionals
  if (event.target.id === "searchInput") return;
  // functionality of hiding your search dropdown
})

---

只需将

onblur

函数绑定到

input

元素即可

所选元素已触发

onblur

事件。因此，我们应该在

输入框

失去

焦点

后等待一个短暂的延迟，例如

~300ms

，以便首先识别所选元素上的

点击

解决方案

inputBox.onblur=function（）{
setTimeout（函数（）{
searchWrapper.classList.remove（'active'）；
}, 300);
};

其他想法：

在

JavaScript

中，您应该使用单引号而不是双引号，因为它更容易转义字符和打印HTML。另一方面，也没有负面影响：

请注意，有时使用

数据属性

或

id

s而不是查询选择器更有意义。查询选择器需要更多时间来计算路径（速度较慢）。如果要选择多个元素，可以使用

querySelectorAll（）

可执行文件（已修改您的版本）

功能选择（元素）{
让selectData=element.textContent；
inputBox.value=选择数据；
icon.onclick=（）=>{
网络链接=”https://www.google.com/search?q=“+选择数据；
linkTag.setAttribute（“href”，webLink）；
linkTag.click（）；
}
searchWrapper.classList.remove（“活动”）；
}
功能展示建议（列表）{
让列表数据；
如果（！list.length）{
userValue=inputBox.value；
listData='
'+userValue+'
'；
}否则{
listData=list.join（“”）；
}
suggBox.innerHTML=listData；
}
让建议=[
"频道",，
“编码实验室”，
“编码尼泊尔”，
“YouTube”，
“YouTuber”，
“YouTube频道”，
"博主",，
“宝莱坞”，
“Vlogger”，
“Vechiles”，
“Facebook”，
“自由职业者”，
“Facebook页面”，
“设计师”，
“开发商”，
“网页设计师”，
“Web开发者”，
“HTML和CSS中的登录表单”，
“如何学习HTML和CSS”，
“如何学习JavaScript”，
“如何成为自由职业者”，
“如何成为网页设计师”，
“如何启动游戏频道”，
“如何启动YouTube频道”，
“HTML代表什么？”，
“CSS代表什么？”，
];
//获取所有必需的元素
const searchWrapper=document.querySelector（“.search输入”）；
const inputBox=searchWrapper.querySelector（“输入”）；
const suggBox=searchWrapper.querySelector（“.autocom框”）；
const icon=searchWrapper.querySelector（“.icon”）；
让linkTag=searchWrapper.querySelector（“a”）；
让网络链接；
//如果用户按下任意键并释放
inputBox.onkeyup=（e）=>{
让userData=e.target.value；//用户输入的数据
让emptyArray=[]；
如果（用户数据）{
icon.onclick=（）=>{
网络链接=”https://www.google.com/search?q=“+用户数据；
linkTag.setAttribute（“href”，webLink）；
console.log（webLink）；
linkTag.click（）；
}
emptyArray=建议。筛选器（（数据）=>{
//将数组值和用户字符筛选为小写，并仅返回以用户插入字符开头的单词
返回data.toLocaleLowerCase（）.startWith（userData.toLocaleLowerCase（））；
});
emptyArray=emptyArray.map（（数据）=>{
//在li标记内传递返回数据
返回数据=“
”+数据+”
”；
});
searchWrapper.classList.add（“active”）；//显示自动完成框
showSuggestions（emptyArray）；
让allList=suggBox.queryselectoral（“li”）；
for（设i=0；i
@导入url（'https://fonts.googleapis.com/css2?family=Poppins:wght@200；300；400；500；600；700&display=swap'）；
* {
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Poppins”，无衬线；
}
身体{
背景：#644bff；
填充：0 20px；
}
：：选择{
颜色：#fff；
背景:#664AFF；
}
.包装纸{
最大宽度：450像素；
利润率：150px自动；
}
.wrapper.search输入{
背景：#fff；
宽度：100%；
边界半径：5px；
位置：相对位置；
盒影：0px 1px 5px 3px rgba（0,0,0,0.12）；
}
.搜索输入{
高度：55px；
宽度：100%；
大纲：无；
边界：无；
边界半径：5px；
填充：0 60px 0 20px；
字号：18px；
盒影：0px 1px 5px rgba（0,0,0,0.1）；
}
.search-input.active输入{
边界半径：5px5px0；
}
.搜索输入.自动通信框{
填充：0；
不透明度：0；
指针事件：无；
最大高度：280px；
溢出y：自动；
}
.search-input.active.autocom框{
填充：10px 8px；
不透明度：1；
指针事件：自动；
}
李先生{
列表样式：无；
填充：8px 12px；
显示：无；
宽度：100%；
游标：默认值；
边界半径：3px；
}
.search-input.active.autocom框li{
显示：块；
}
.自动通信盒李：悬停{
背景：#efef；
}
.搜索输入.图标{
位置：绝对位置；
右：0px；
顶部：0px；
高度：55px；
宽度：55px；
文本对齐：居中；
线高：55px；
字体大小：20px；
颜色：#