如何实现搜索框有输入时隐藏占位图并保持隐藏状态？

要实现仅当搜索框有输入时隐藏背景图，且刷新/失焦后保持状态，可以通过以下方式修改代码：

1. 调整CSS：新增控制背景图的类 #

不再依赖:focus伪类，改用自定义类切换背景图显示状态：

input {
  border: 0;
  outline: none;
  border-bottom: 3px solid #00A7E0;
  width: 90%;
  background-image: url("../images/searchImage.png");
  background-repeat: no-repeat;
  background-size: 25%;
  padding: 10px;
}

/* 新增类：移除背景图 */
input.no-bg {
  background-image: none;
}

2. 修改JS：监听输入状态+初始化页面 #

添加页面加载时的初始化逻辑，同时在输入时检查内容，动态切换类：

// 页面加载完成后初始化搜索框状态（处理浏览器自动填充/刷新场景）
window.addEventListener('load', function() {
  const input = document.getElementById("mySearch");
  toggleBackground(input);
});

function myFunction() {
  const input = document.getElementById("mySearch");
  const filter = input.value.toUpperCase();
  const ul = document.getElementById("myMenu");
  const li = ul.getElementsByTagName("li");
  
  // 先处理背景图显示逻辑
  toggleBackground(input);
  
  // 原有菜单筛选逻辑保持不变
  for (let i = 0; i < li.length; i++) {
    const a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

// 封装背景图切换逻辑，复用性更强
function toggleBackground(input) {
  // 判断输入框是否有非空内容
  if (input.value.trim() !== '') {
    input.classList.add('no-bg');
  } else {
    input.classList.remove('no-bg');
  }
}

3. 简化HTML：移除不必要的事件 #

原来的onfocus事件不再需要，只保留输入触发的逻辑：

<input type="text" id="mySearch" onkeyup="myFunction()" title="Type in a category">

逻辑说明 #

• 不管搜索框是否聚焦，只要输入框有非空内容，就会添加.no-bg类隐藏背景图；内容清空时自动恢复
• 页面加载时的初始化逻辑，解决了刷新后或浏览器自动填充内容时背景图重新出现的问题
• 用类切换代替直接修改元素样式，更符合CSS与JS分离的原则，也便于维护

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