维基百科搜索工具技术求助：回车无法触发搜索、结果重复追加

Hey Ryan, let's get those two bugs sorted out for you! Here's what's going wrong and how to fix them:

1. Enter Key Not Triggering Search #

The issue has two easy fixes:

• You were referencing the searchWiki function without actually calling it (missing parentheses) in your keyup listener.
• Pressing Enter in a form triggers the default submit action, which refreshes the page—we need to block that behavior.

Update your keyup event listener like this:

searchBox.addEventListener("keyup", function(event) {
  if (event.key === "Enter") {
    event.preventDefault(); // Stop page refresh from form submit
    searchWiki(); // Call the function with parentheses
  }
});

2. New Results Appending to Old Ones #

Right now, you're adding new results to the existing list without clearing it first. We just need to empty the results container before building new content.

Add this line right before calling the build function in searchWiki:

results.innerHTML = ''; // Clear all old results

Bonus Small Fixes (Avoid Future Headaches) #

• Your script tag has a typo: type="test/javascript" should be type="text/javascript"
• The fetch request was using POST with unnecessary body data—Wikipedia's OpenSearch API works better with GET, and that body wasn't being used anyway. Simplify your fetch call to:

fetch(`https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=${keyword}&limit=5`)
  .then(response => response.json())
  .then((data) => {
    console.log(data);
    results.innerHTML = ''; // Clear old results
    build(data);
  });

Full Corrected Code #

Here's the complete code with all fixes plus a couple of UX improvements:

<div class="container">
  <div class="banner text-center align-items">
    <h1>Wiki Search</h1>
    <p>Search for articles on Wikipedia</p>
  </div>
  <form action="" class="text-center">
    <input type="search" id="search-box" placeholder="Search Here">
    <div class="buttons">
      <input type="button" onclick="searchWiki()" id="search-button" value="Search">
      <input type="submit" value="Feel Lucky?">
    </div>
  </form>
  <div class="articles">
    <ul id="results">
    </ul>
  </div>
</div>
<script type="text/javascript">
  const searchBox = document.getElementById('search-box');
  const sButton = document.getElementById('search-button');
  const results = document.getElementById('results');

  window.onload = function() {
    searchBox.focus();
  };

  const searchWiki = () => {
    const keyword = searchBox.value;
    fetch(`https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=${keyword}&limit=5`)
      .then(response => response.json())
      .then((data) => {
        console.log(data);
        results.innerHTML = ''; // Clear existing results
        build(data);
      });
  }

  const build = (data) => {
    let title = data[1];
    let description = data[2];
    let url = data[3];
    for(let x = 0; x < title.length; x++){ // Use dynamic length instead of hardcoding 5
      const item = `<a href="${url[x]}" target="_blank">
        <li>
          <h5>${title[x]}</h5>
          <p>${description[x] || 'No description available'}.</p>
        </li>
      </a>`;
      results.insertAdjacentHTML("beforeend", item);
    }
  }

  searchBox.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
      event.preventDefault();
      searchWiki();
    }
  });
</script>

Extra tweaks I added:

• Used title.length in the loop so it works even if the API returns fewer than 5 results
• Added a fallback for empty descriptions to avoid blank text
• Changed target="#" to target="_blank" so links open in a new tab (better user experience)

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