如何实现搜索栏结果跳转对应页面并避免搜索列表影响头部布局

针对你提出的两个问题，这里给出具体的实现方案：

1. 实现搜索结果跳转功能 #

原代码只收集了列表项的文本，没有保存对应的跳转链接，需要调整数据结构，把每个条目的显示文本和跳转地址绑定在一起：

修改JavaScript数据收集与搜索逻辑 #

// 收集包含跳转链接的完整数据
let listItems = document.querySelectorAll('#wrapper .name a');
let data = Array.from(listItems).map(item => ({
  text: item.innerText,
  url: item.getAttribute('href')
}));
// 按文本名称排序
let sortedList = data.sort((a, b) => a.text.toLowerCase().localeCompare(b.text.toLowerCase()));

let searchInput = document.getElementById('input');

searchInput.addEventListener('keyup', (e) => {
  removeElements();
  const inputVal = searchInput.value.trim().toLowerCase();
  if (!inputVal) return;
  
  for(let item of sortedList){
    if(item.text.toLowerCase().startsWith(inputVal)){
      let listItem = document.createElement("li");
      listItem.classList.add("list-items");
      listItem.style.cursor = 'pointer';
      // 点击搜索项直接跳转对应页面
      listItem.onclick = () => {
        window.location.href = item.url;
      };
      // 高亮匹配的输入部分
      let matchedText = `<b>${item.text.substring(0, inputVal.length)}</b>${item.text.substring(inputVal.length)}`;
      listItem.innerHTML = matchedText;
      document.querySelector('.search-list').appendChild(listItem);
    }
  }
});

function removeElements(){
  let items = document.querySelectorAll('.list-items');
  items.forEach((item) => item.remove());
}

2. 修复搜索列表导致的Header布局变动问题 #

通过CSS绝对定位让搜索列表脱离文档流，不会撑开Header容器，同时保证下拉列表的层级和展示位置：

添加CSS样式 #

header {
  position: relative; /* 为绝对定位的子元素提供定位参考 */
  padding: 1rem;
  background-color: #f5f5f5;
}

form {
  position: relative;
}

#input {
  width: 100%;
  padding: 0.6rem;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-list {
  position: absolute;
  top: calc(100% + 2px); /* 紧贴输入框下方 */
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  background-color: white;
  border: 1px solid #ddd;
  border-top: none;
  border-radius: 0 0 4px 4px;
  list-style: none;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100; /* 确保在其他内容上方显示 */
}

.list-items {
  padding: 0.6rem;
}

.list-items:hover {
  background-color: #f0f0f0; /* 鼠标悬停高亮 */
}

完整整合代码 #

HTML（保持原结构无需修改） #

<header>
 <div>
  <form autocomplete="off">
    <input id="input" type="text">
    <ul class="search-list"></ul>
  </form>
 </div>
</header>

<div id="wrapper">
    <div class="name-list">
      <ul class="names">
        <li class="name"><a href="cat.html">Cat</a></li>
        <li class="name"><a href="dog.html">Dog</a></li>
        <li class="name"><a href="frog.html">Frog</a></li>
        <li class="name"><a href="horse.html">Horse</a></li>
      </ul>
    </div>
    
    <div class="name-list">
      <ul class="names">
        <li class="name"><a href="rabbit.html">Rabbit</a></li>
        <li class="name"><a href="turtle.html">Turtle</a></li>
        <li class="name"><a href="whale.html">Whale</a></li>
        <li class="name"><a href="worm.html">Worm</a></li>
      </ul>
    </div>
</div>

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