为JavaScript自动补全搜索栏添加HTML页面跳转功能求助

你的自动补全功能已经正常运行，要实现选中搜索建议后跳转对应页面，只需要把关键词和目标页面绑定起来，再在选中逻辑里添加跳转代码即可，具体修改如下：

核心修改步骤 #

1. 重构关键词数据结构：把单纯的字符串数组改成包含关键词和对应跳转URL的对象数组，方便关联页面
2. 渲染时保留页面信息：在生成搜索建议列表项时，用data-url属性存储对应页面地址
3. 添加跳转逻辑：在选中列表项的函数里，获取存储的URL并完成页面跳转

修改后的JavaScript代码 #

// 改成对象数组，每个元素包含关键词和对应跳转页面
let availableKeywords = [
  { keyword: '6TEST6', url: 'page6.html' },
  { keyword: '5TEST5', url: 'page5.html' },
  { keyword: '4TEST4', url: 'page4.html' },
  { keyword: '3TEST3', url: 'page3.html' },
  { keyword: '2TEST2', url: 'page2.html' },
  { keyword: '1TEST1', url: 'page1.html' },
];

const resultsBox = document.querySelector(".result-box")
const inputBox = document.getElementById("input-box")

inputBox.onkeyup = function() {
  let result = [];
  let input = inputBox.value;
  if (input.length) {
    // 过滤时匹配对象里的keyword属性
    result = availableKeywords.filter(item => {
      return item.keyword.toLowerCase().includes(input.toLowerCase());
    });
  }
  display(result);

  if (!result.length) {
    resultsBox.innerHTML = '';
  }
}

function display(result) {
  const content = result.map(item => {
    // 给li标签添加data-url属性存储跳转地址
    return `<li onclick="selectInput(this)" data-url="${item.url}">${item.keyword}</li>`;
  });

  resultsBox.innerHTML = "<ul>" + content.join('') + "</ul>";
}

function selectInput(list) {
  inputBox.value = list.innerHTML
  resultsBox.innerHTML = '';
  // 获取data-url属性的值并跳转页面
  const targetUrl = list.getAttribute('data-url');
  if (targetUrl) {
    window.location.href = targetUrl;
  }
}

CSS和HTML代码保持不变 #

你的CSS和HTML代码无需修改，直接沿用原代码即可。

补充说明 #

• 请把代码里的page6.html、page5.html等替换成你实际的页面路径（比如movie-detail-6.html这类真实文件名）
• 如果需要在新标签页打开页面，可将window.location.href = targetUrl;替换为window.open(targetUrl, '_blank');

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