如何用JavaScript实现搜索栏：隐藏列表至搜索时显示并修复布局问题

修复布局：让搜索结果显示在搜索框下方 #

你当前的CSS里.pine用display: block，没法控制输入框和列表的垂直排列，改成垂直flex布局就能让列表乖乖待在搜索框下面。同时去掉列表默认的项目符号和内边距，避免多余占位：

.search {
    display: flex;
    align-items: center; /* 按钮和搜索框垂直居中对齐 */
    margin: 10px;
}
.search button {
    margin-right: 10px;
}
.pine {
    display: flex;
    flex-direction: column; /* 垂直排列输入框和列表 */
    width: 300px; /* 按需调整宽度 */
}
.pine ul {
    display: none;
    list-style: none; /* 移除默认项目符号 */
    padding-left: 0; /* 去掉默认内边距 */
    margin: 5px 0 0 0; /* 调整和输入框的间距 */
    border: 1px solid #eee; /* 可选：加边框区分结果区域 */
    border-top: none;
}
.pine ul li {
    padding: 8px;
}
.pine ul li:hover {
    background-color: #f5f5f5; /* 可选：hover高亮 */
}

改进过滤逻辑：彻底隐藏不匹配项（包括项目符号） #

原来的JS只隐藏了<a>标签，<li>还留在页面上，所以项目符号会残留。改成操作<li>元素，同时在输入为空时隐藏整个列表，满足默认隐藏的需求：

function search_links() {
  const input = document.getElementById('searchBox').value.trim().toLowerCase();
  const searchList = document.getElementById('searchList');
  const listItems = searchList.getElementsByTagName('li');

  // 输入为空时，直接隐藏整个列表
  if (!input) {
    searchList.style.display = 'none';
    return;
  }

  // 有输入时显示列表，开始过滤
  searchList.style.display = 'block';

  for (let i = 0; i < listItems.length; i++) {
    const linkText = listItems[i].querySelector('.searchLinks').textContent.toLowerCase();
    listItems[i].style.display = linkText.includes(input) ? 'block' : 'none';
  }
}

优化HTML（可选） #

给输入框加个宽度，让布局更协调：

<div class="search">
    <button class="dropBtn">Menu</button>
    <div class="pine">
        <input id="searchBox" onkeyup="search_links()" type="text" name="searchBox" placeholder="Search" style="padding: 8px; width: 100%;">
        
        <ul class="searchList" id='searchList'>
            <li><a href="../Covid_Website/pages/buisnessGuidance.html" class="searchLinks">Buisness Guidance</a></li>
            <li><a href="pages/indivdualGuidance.html" class="searchLinks">Guidance for Indivduals</a></li>
            <li><a href="pages/testing.html" class="searchLinks">Testing</a></li>
            <li><a href="pages/caseData.html" class="searchLinks">Case Data</a></li>
            <li><a href="pages/initiatives.html" class="searchLinks">Current Initiatives</a></li>
            <li><a href="pages/help.html" class="searchLinks">Help and Contact</a></li>
        </ul>
    </div>
</div>

最终效果 #

• 无输入时列表完全隐藏，不占页面空间
• 输入后列表自动显示在搜索框下方，匹配项显示、不匹配项彻底消失（包括项目符号）
• 按钮和搜索框对齐，搜索结果会推动下方页面内容下移

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