实现搜索栏结果跳转至自定义URL的需求与代码咨询

核心思路是将国家名称与对应URL绑定为键值对，生成搜索结果时直接给<a>标签设置跳转链接。具体修改如下：

1. 重构数据结构 #

把纯国家名称数组改成包含name（国家名）和url（跳转地址）的对象数组，确保每个国家对应唯一自定义URL：

const countryData = [
  { name: 'Australia', url: '/travel/page001.html' },
  { name: 'Austria', url: '/travel/page002.html' },
  { name: 'Brazil', url: '/travel/page003.html' },
  { name: 'Canada', url: '/travel/page004.html' },
  { name: 'Denmark', url: '/travel/page005.html' },
  { name: 'Egypt', url: '/travel/page006.html' },
  { name: 'France', url: '/travel/page007.html' },
  { name: 'Germany', url: '/travel/page008.html' },
  { name: 'USA', url: '/travel/page009.html' },
  { name: 'Vietnam', url: '/travel/page010.html' }
];

2. 修改loadSearchData函数 #

遍历对象数组，创建<a>标签时同步设置href属性，实现点击跳转：

function loadSearchData() {
  const countryData = [
    { name: 'Australia', url: '/travel/page001.html' },
    { name: 'Austria', url: '/travel/page002.html' },
    { name: 'Brazil', url: '/travel/page003.html' },
    { name: 'Canada', url: '/travel/page004.html' },
    { name: 'Denmark', url: '/travel/page005.html' },
    { name: 'Egypt', url: '/travel/page006.html' },
    { name: 'France', url: '/travel/page007.html' },
    { name: 'Germany', url: '/travel/page008.html' },
    { name: 'USA', url: '/travel/page009.html' },
    { name: 'Vietnam', url: '/travel/page010.html' }
  ];

  const list = document.getElementById('list');
  
  countryData.forEach((item) => {
    const a = document.createElement("a");
    a.innerText = item.name;
    a.href = item.url; // 绑定跳转URL
    a.classList.add("listItem");
    // 可选：添加target="_blank"让链接在新窗口打开
    // a.target = "_blank";
    list.appendChild(a);
  })
}

3. 保留原有搜索逻辑 #

原search函数无需改动，它基于元素文本内容匹配，与URL无关，可正常工作：

function search() {
  let listContainer = document.getElementById('list');
  let listItems = document.getElementsByClassName('listItem');
  let input = document.getElementById('searchbar').value
  input = input.toLowerCase();
  let noResults = true;
  
  for (i = 0; i < listItems.length; i++) {
    if (!listItems[i].innerHTML.toLowerCase().includes(input) || input === "") {
      listItems[i].style.display = "none";
      continue;
    } else {
      listItems[i].style.display = "flex";
      noResults = false;
    }

    listContainer.style.display = noResults ? "none" : "block";
  }
}

完整HTML代码 #

HTML部分保持原样即可：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Searchbar</title>
  <!-- link rel="stylesheet" href="styles.css" -->
</head>

<body onload="loadSearchData()">
  <div class="container">
    <h2>Search Parts</h2>
    <input id="searchbar" autocomplete="off" onkeyup="search()" type="text" name="search" placeholder="What are you looking for?">
    <div id="list"></div>
  </div>
  <script src="script.js"></script>
</body>

修改后，搜索结果的每个国家名称都会成为可点击链接，点击后跳转到对应自定义URL，原有搜索功能完全保留。

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