如何根据用户输入替换当前页面内容？

Question

我正在创建一个搜索引擎，使用维基百科 API 来查询内容。按照目前的情况，用户可以进行搜索输入，页面 returns 包含链接和摘要的前 10 个结果。当用户进行另一次搜索时，我运行遇到困难，在这种情况下，页面只是简单地再次附加原始搜索结果。我试过使用 replaceWith() 和 html()，但它们要么完全阻止搜索结果通过（如果我将它们放在事件处理程序中），要么它们不会被触发（如果它们是在事件处理程序之外）。我希望实现一个结果，用户可以进行另一个输入，页面将用新的搜索结果替换当前内容。

这是我目前拥有的：

JS:

var results = [];

$("#search").on("keydown", "#searchinput", function(event) {
  if (event.key === "Enter") {
    var searchParameter = encodeURIComponent(this.value);
    var link = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchParameter + "&limit=10&namespace=0&format=json&origin=*";
    $.getJSON(link, function(data) {
      for (var key in data) {
        results.push(data[key]);
      }
      for (var i = 0; i < 10; i++) {
        $("#results").append("<div class=\"resultContent\">" + "<h2>" + "<a href=\"" + results[3][i] + "\">" + results[1][i] + "</a>" + "</h2>" + "<p>" + results[2][i] + "<br/>" + "</p>")
      }
    })
  }
})

HTML:

<a href="https://en.wikipedia.org/wiki/Special:Random">Feeling Bold? Click Here for a Random Article</a>

<div id="search">
  <span>Search:</span>
  <input type="text" id="searchinput" autocomplete="off"></input>
</div>

<div id="results"></div>

感谢您的帮助！

Answer 1

您可以在循环之前删除当前结果：

$("#results").empty();    
for (var i = 0; i < 10; i++) {
     $("#results").append("<div class=\"resultContent\">" + "<h2>" + "<a href=\"" + results[3][i] + "\">" + results[1][i] + "</a>" + "</h2>" + "<p>" + results[2][i] + "<br/>" + "</p>")
}

如何根据用户输入替换当前页面内容？

How to replace current page content on user input?

html

javascript

jquery

mediawiki-api