Javascript 如何防止搜索框崩溃？

我有一个搜索按钮，在用户键入时显示自动完成建议，如下所示：

---

问题是，单击

建议的文本

，搜索栏会折叠。我希望它只有在用户点击外部的空白区域时才会崩溃

您必须使用jquery单击事件而不是css悬停

运行代码片段，看看我是如何做到的。

这是唯一的事件

 $(".searchBox").click(function(){
 $(".searchInput").css({"width":"240px",
    "padding": "0 6px"});
 });

这是单击外部事件：

$(document).mouseup(function(e) 
{
    var container = $(".searchBox");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
         $(".searchInput").css({"width":"0px",
    "padding": "0px"});
    }
});

$（“.searchBox”）。单击（函数（）{
$（“.searchInput”）.css（{“宽度”：“240px”，
“填充”：“0 6px”}）；
});
$（文档）.mouseup（函数（e）
{
var容器=$（“.searchBox”）；
//如果单击的目标既不是容器也不是容器的后代
如果（！container.is（e.target）&&container.has（e.target）.length==0）
{
$（“.searchInput”）.css（{“宽度”：“0px”，
“填充”：“0px”}）；
}
});
功能自动完成（inp、arr）{
/*autocomplete函数接受两个参数，
文本字段元素和可能的自动完成值数组：*/
var dontClose=document.getElementById（'searchBox'）；
无功电流聚焦；
/*当有人在文本字段中写入时执行函数：*/
inp.addEventListener（“输入”，函数（e）{
var a，b，i，val=该值；
/*关闭所有已打开的自动完成值列表*/
closeAllList（）；
如果（！val）{返回false；}
currentFocus=-1；
/*创建将包含以下项（值）的DIV元素：*/
a=document.createElement（“DIV”）；
a、 setAttribute（“id”，this.id+“自动完成列表”）；
a、 setAttribute（“类”、“自动完成项”）；
/*将DIV元素作为自动完成容器的子元素追加：*/
this.parentNode.appendChild（a）；
/*对于数组中的每个项*/
对于（i=0；i”+arr[i].substr（0，val.length）+“”；
b、 innerHTML+=arr[i].substr（val.length）；
/*插入将保存当前数组项值的输入字段：*/
b、 innerHTML+=“”；
/*当有人单击项值（DIV元素）时执行函数：*/
b、 addEventListener（“单击”，函数（e）{
/*插入自动完成文本字段的值：*/
inp.value=this.getElementsByTagName（“输入”）[0].value；
/*关闭自动完成值的列表，
（或任何其他打开的自动完成值列表：*/
closeAllList（）；
e、 预防默认值（）；
});
a、 儿童（b）；
}
}
});
/*按键盘上的键执行功能：*/
inp.addEventListener（“向下键控”，函数（e）{
var x=document.getElementById（this.id+“自动完成列表”）；
如果（x）x=x.getElementsByTagName（“div”）；
如果（e.keyCode==40）{
/*如果按下向下箭头键，
增加currentFocus变量：*/
currentFocus++；
/*并使当前项目更加可见：*/
addActive（x）；
}如果（e.keyCode==38）{//up
/*如果按下向上箭头键，
减小currentFocus变量：*/
当前焦点--；
/*并使当前项目更加可见：*/
addActive（x）；
}否则如果（e.keyCode==13）{
/*如果按ENTER键，则阻止提交表单*/
e、 预防默认值（）；
如果（当前焦点>-1）{
/*并模拟单击“活动”项：*/
如果（x）x[currentFocus]。单击（）；
}
}
});
函数addActive（x）{
/*将项目分类为“活动”的函数：*/
如果（！x）返回false；
/*首先删除所有项目上的“活动”类：*/
清除活性（x）；
如果（currentFocus>=x.length）currentFocus=0；
如果（currentFocus<0）currentFocus=（x.length-1）；
/*添加类“自动完成活动”：*/
x[currentFocus].classList.add（“自动完成活动”）；
}
函数removeActive（x）{
/*从所有自动完成项中删除“活动”类的函数：*/
对于（变量i=0；i

。自动完成项目{
位置：绝对位置；
边框：1px实心#d4；
边框底部：无；
边界顶部：无；
边框左上半径：20px；
z指数：99；
/*将自动完成项目定位为与容器相同的宽度：*/
最高：100%；
左：0；
右：0；
}
.autocomplete items div{
填充：10px；
光标：poin
.searchBox > .searchInput:focus {
    width: 240px;
    padding: 0 6px;
}