CSS-使搜索建议框边框/背景在为空时消失

---

如图所示，我有一个搜索框，当您键入以C开头的内容时，如CIS lab或CIS，右侧会出现一个建议列表。如果您注意到，后面有一个灰色框，可根据列出的内容调整大小，但是，当搜索框被清除或仅为空时，仍然有一个小框。如果建议当前未处于活动状态，没有背景，我如何才能做到这一点？

使用

：empty

#suggestion {
    display: none;
}
#suggestions:not(:empty) {
    display: block;
}

您可以使用伪类：

#建议：空{
显示：无；
}

要使其正常工作，您必须删除

#建议

中的所有内容（包括空格）：

var提示=[“c#”，
“c++”，
“抄袭呼叫”，
“点名”，
“通过引用调用”，
“职业”，
“卡尔森”，
“层叠样式表”，
“案件”，
“抓”，
“c++书籍”，
“c++类”，
“c++类”，
“c++编译器”，
“c++调试器”，
“c++文档”，
“细胞填充”，
“单元格填充”，
“单元间距”，
“单元间距”，
“认证”，
“c++异常”，
“c++函数”，
“c++编程”，
“char”，
“字符数组”，
“选择”，
“cin”，
“独联体”，
“独联体校友会”，
“独联体评估”，
“cis课程表”，
“cis课程说明”，
“独联体课程”，
“cis课程表”，
“独联体部”，
“独联体部主席”，
“独联体系教员”，
“商务部”，
“cis部门”，
“cis系教员”，
“cis部门政策”，
“独联体学院”，
“cis实验室”，
“cis实验室时间”，
“cis实验室信息”，
“cis实验室时间表”，
“独联体少校”，
“独联体小调”，
“独联体导师”，
“类”，
“类”，
“类函数”，
“课程表”，
“单击处理程序”，
“结束”，
“中电”，
“c++对象”，
“c++对象”，
“c字串”，
“代码重用”，
“编码”，
“编码错误”，
“颜色”，
“命令行参数”，
“评论”，
“比较”，
“复合条件”，
“计算机”，
“计算机和网络安全”，
“计算机体系结构”，
“计算机体系结构和操作系统”，
“计算机组织”，
“计算机科学”，
“计算机科学计划”，
“计算机科学集中”，
“计算机安全”，
“计算”，
“计算与信息科学”，
“计算机与信息科学专业”，
“计算机职业”，
“计算机系”，
“计算机系”，
“计算机系”，
“计算主页”，
“计算机工作”，
“计算机专业”，
“计算机科学项目”，
“条件”，
“const”，
“常数”，
“常数函数”，
“建造商”，
“容器类”，
“转换”，
“饼干”，
“复制构造函数”，
“伯爵”，
“计数控制回路”，
“课程”，
“课程说明”，
“课程表”，
“cout”，
“c++指针”，
“c++程序”，
“c++编程”，
“铯浓度”，
“css”，
“c++流”，
“c样式字符串”，
“c样式字符串”，
“ctrl z”，
“c++教程”，
“课程”
];
功能建议（str）{
var电流提示、位置、温度；
var domposities=document.getElementById（“建议”）；//获取对id为建议的div的引用。
清理（）；
对于（k=0；k

谢谢。我没有意识到伪类可以解决这个问题。如果我在某个时候键入，然后将其退格为空字符串，或者只是点击“清除”按钮，那么这种方法是有效的，但是当页面初始加载时，框仍然存在。有没有办法解决这个问题。然后改变它。使其成为

#建议{显示：无；}

和

#建议：不（：空）{display:block；}

。换句话说-默认情况下隐藏，不清空时显示。很高兴知道这一点。我有点不明白删除建议中的所有内容（包括空格）是什么意思，但它似乎可以工作，除了最初加载页面时。@idlehand我的意思是

中有一些空格，所以

：empty

会ldn不起作用。这同样适用于换行符、制表符等。它必须是

。

#suggestion {
    display: none;
}
#suggestions:not(:empty) {
    display: block;
}