我来帮你搞定这两个问题，先从搜索框设计说起，再解决你的代码bug：

设计搜索框核心要兼顾易用性、体验和品牌契合度，分享几个关键要点：

• 易用性优先：把搜索框放在用户第一眼就能看到的位置（比如页面顶部导航栏），输入区域尺寸要足够大（至少能容纳20个字符），placeholder提示要直白（比如“搜索产品、文章”），别搞花里胡哨的样式干扰输入。
• 视觉贴合品牌：保持和网站整体UI风格统一，比如边框圆角、配色可以沿用品牌色；添加搜索图标增强辨识度，并且让图标可点击触发搜索操作，提升操作便捷性。
• 强化功能体验：
  • 支持实时搜索（像你现在用的onkeyup事件），输入时即时反馈结果，不用用户点击搜索按钮；
  • 可以添加搜索建议/自动补全功能，根据用户输入的关键词推荐相关内容，帮用户更快找到目标；
  • 处理空输入场景：比如输入为空时隐藏结果列表，或者提示“请输入搜索内容”。
• 重视无障碍设计：给搜索框添加明确的<label>标签，支持键盘操作（回车触发搜索、Tab键快速聚焦），确保屏幕阅读器能正确识别搜索功能，覆盖更多用户群体。

先分析你的问题：你想要初始状态隐藏所有LI，只有输入搜索内容后才显示匹配项，但当前代码的逻辑有两个问题：

1. 页面加载时没有执行过滤函数，初始状态下LI是默认显示的；
2. 当搜索框为空时，filter是空字符串，所有LI的文本都会匹配空字符串，导致全部显示，和你的需求完全相反。

下面是修改后的完整代码，我标注了关键修改点：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search...">
<ul id="myUL">
  <li><a href="#">tree</a></li>
  <li><a href="#">bike</a></li>
  <li><a href="#">sea</a></li>
  <li><a href="#">mobile</a></li>
</ul>

<script>
function myFunction() { 
  var input, filter, ul, li, a, i, txtValue; 
  input = document.getElementById("myInput"); 
  filter = input.value.toUpperCase(); 
  ul = document.getElementById("myUL"); 
  li = ul.getElementsByTagName("li"); 
  
  // 关键修改：判断搜索框是否为空
  if (filter === "") {
    // 空输入时隐藏所有LI
    for (i = 0; i < li.length; i++) {
      li[i].style.display = "none";
    }
  } else {
    // 有输入时，只显示匹配的项
    for (i = 0; i < li.length; i++) { 
      a = li[i].getElementsByTagName("a")[0]; 
      txtValue = a.textContent || a.innerText; 
      if (txtValue.toUpperCase().indexOf(filter) > -1) { 
        li[i].style.display = ""; 
      } else { 
        li[i].style.display = "none"; 
      } 
    }
  }
}

// 关键修改：页面加载完成后自动执行一次，实现初始隐藏效果
window.onload = myFunction;
</script>

简单说明下修改逻辑：

• 新增window.onload = myFunction;：页面加载完成后立刻执行过滤函数，确保打开页面时所有LI都是隐藏的；
• 添加空输入判断：当搜索框没有内容时，强制隐藏所有LI；只有当用户输入关键词后，才筛选出匹配的项显示，完全符合你的需求。

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