Как заменить содержимое текущей страницы на ввод пользователя?

Question

Я создаю поисковую систему, используя 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>") 
}