如何在清空搜索输入框时隐藏搜索结果？仅使用JavaScript

我明白你的困扰——之前的代码在输入框清空时没法隐藏所有列表项，这是因为当query为空字符串时，el.innerText.indexOf('')会对所有元素返回0（空字符串在任何文本里都能匹配到），所以所有<li>都会被设置为display: block，这显然不是你想要的效果。

下面是纯JavaScript的修复方案，只需要修改你的myFunction函数即可：

function myFunction() { 
  var query = document.querySelector('#myInput').value.trim(); // 去除首尾空格，避免空输入带空格的误判
  var elements = document.querySelectorAll('li'); 

  // 当输入框为空时，直接隐藏所有列表项
  if (!query) {
    for (var i = 0; i < elements.length; i ++) { 
      elements[i].style.display = 'none'; 
    }
    return; // 结束函数，无需执行后续筛选逻辑
  }

  // 输入框有内容时，执行筛选逻辑
  for (var i = 0; i < elements.length; i ++) { 
    var el = elements[i]; 
    // 转小写实现不区分大小写的搜索，不需要的话可以去掉.toLowerCase()
    if (el.innerText.toLowerCase().indexOf(query.toLowerCase()) !== -1) {
      el.style.display = 'block'; 
    } else {
      el.style.display = 'none'; 
    }
  } 
}

关键修改点说明： #

• query.trim()：处理输入框只有空格的情况，避免误判为有效搜索内容
• 空值判断逻辑：输入框为空时直接批量隐藏所有列表项，快速终止函数流程
• 不区分大小写优化：让搜索更人性化，用户无需严格匹配大小写

现在测试一下：清空输入框时所有列表项会自动隐藏；输入内容时，正常显示匹配的项，完美解决你的问题！

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