如何实现搜索建议默认隐藏、输入时显示？现有代码触发失效排查

问题汇总 #

• CSS文件混入了HTML标签<style type="text">，语法错误导致部分CSS规则失效
• 控制显示的CSS选择器.text input:focus + .hide完全不匹配实际DOM结构：输入框父级类名是search而非text，且建议列表.hide不是输入框的相邻兄弟元素，无法触发显示
• 宽度为800px的媒体查询缺少闭合大括号，导致后续所有CSS规则失效
• 搜索框#myInput的宽度属性值为非法单位2300x，布局异常
• 仅靠CSS无法实现「输入内容后才显示建议」的需求，绑定的myFunction方法无对应实现

修复步骤 #

1. 修复CSS文件 #

首先删除CSS文件开头的<style type="text">冗余标签，补全媒体查询闭合大括号，修正搜索框宽度，调整建议列表的样式规则：

/* 原有CSS保留，修改以下部分 */
#myInput{
  /* 修正单位错误，根据需求调整宽度即可 */
  width: 230px;
  /* 其他原有属性保留 */
}

@media(max-width: 800px){
  nav ul{
    position: fixed;
    width: 40%;
    height: 100vh;
    top: 60px;
    left: 100%;
    text-align: center;
    background-color: #2c3e50;
    transition: all .5s;
  }
  nav ul li{
    display: block;
  }
  nav ul li a{
    font-size: 20px;
    color: white;
  }
  .check{
    display: block;
  }
  #btn:checked ~ ul{
    left: 60%;
  }
/* 补上缺失的闭合大括号 */
}
@media(max-width: 500px){

}
/* 删除原来的 .text input:focus + .hide 规则，替换为以下.hide样式 */
.hide {
  display: none;
  position: absolute;
  /* 调整位置对应搜索框的位置 */
  top: 60px;
  right: 20px;
  width: 230px;
  z-index: 999;
}

2. 实现JS交互逻辑 #

在Principala.js文件中补充myFunction的实现：

function myFunction() {
  const inputEl = document.getElementById('myInput');
  const suggestEl = document.querySelector('.hide');
  // 输入框内容非空时显示建议，为空隐藏
  if (inputEl.value.trim()) {
    suggestEl.style.display = 'block';
    // 若需要实现搜索过滤，可在此补充匹配列表项的逻辑
  } else {
    suggestEl.style.display = 'none';
  }
}

// 可选补充：点击页面其他区域自动隐藏搜索建议
document.addEventListener('click', function(e) {
  const inputEl = document.getElementById('myInput');
  const suggestEl = document.querySelector('.hide');
  if (!inputEl.contains(e.target) && !suggestEl.contains(e.target)) {
    suggestEl.style.display = 'none';
  }
})

3. 可选HTML规范调整 #

把div class=hide改为<div class="hide">，删除head、body中冗余的<font>、<center>等已废弃HTML标签，样式统一写在CSS文件中即可。

内容的提问来源于stack exchange，提问作者ToXic