API呼び出し後にウェブページにデータを動的に追加する方法はありますか？

Question

ユーザー入力があると、wikipediaの結果リストを返すWebページを作成しようとしています。私はWikipediaのAPIをうまく動作させるよう呼びかけましたが、私のWebページにデータを追加しようとすると、1秒間点滅して消えてしまいます。私はそれがイベントハンドラと関係があると思うが、私は運がなければいくつかの選択肢を試した。私はSOとWebの周りを見渡しましたが、解決策を見つけることができませんでした。ここに私のコードです：

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 < results.length; i++) { 
     for (var j = 0; j < results[i].length; j++) { 
      $("#results").append(results[i][j]); 
     } 
     } 
    }) 
    } 
}); 

あなたが提供できる任意の援助に事前に感謝！必要に応じてより多くの情報を提供しています。

Answer 1

$.getJSONへの呼び出しは、変数割り当て付きブロックifにある必要があります。

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 < results.length; i++) { 
 
     for (var j = 0; j < results[i].length; j++) { 
 
      $("#results").append(results[i][j]); 
 
     } 
 
     } 
 
    }) 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="search"> 
 
    <input id="searchinput" type="text"> 
 
</div> 
 
<div id="results"> 
 

 
</div>