ユーザー入力の現在のページコンテンツを置き換えるにはどうすればよいですか？

Question

私はコンテンツのクエリにWikipedia APIを使用して、ソートの検索エンジンを作成しています。現在のところ、ユーザーは検索入力を行うことができ、ページはリンクとスニペットを含む上位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>") 
}