输入新搜索时清除搜索结果答案

【问题标题】：Clearing Search Results when entering new search输入新搜索时清除搜索结果
【发布时间】：2017-06-21 22:38:16
【问题描述】：

我编写了一个维基百科搜索网络应用程序，但遇到了一些困难。我从 wikipedia api 请求数据并在 id="results" 的 div 中以有序方式显示它们没有问题。我遇到的问题是在运行新搜索时清除该元素中的结果。代码如下：

    <style>
  @import: url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

<body class="container-fluid">
  <div class="container-fluid">
    <header class="container-fluid text-center">
      <h1 style="font-family: 'Monsterrat';">Deep Thought's Databank of Ultimate Knowledge</h1>
    </header>
  </div>

  <div class="container-fluid box">
    <div class="container pull-lg-left">
      <div class="container-fluid text-center"><h2 style="font-family:'Monsterrat';">Please Enter Your Query/Keyword Below</h2></div>
      <input class="form-control" type="text" name="search" id="search" placeholder="Search..."/>
    </div>
    <div class="container pull-lg-right">
      <button class="btn btn-info" id="submit">Submit</button>
      <button class="btn btn-primary" id="random" onclick="Random()"><a href="https://en.wikipedia.org/wiki/Special:Random" target="blank" id="randomLink">Random  Article</a></button>
    </div>
  </div>

  <div class="container-fluid spacer">
  </div>

  <div class="container-fluid box">
    <span class="text-center" id="results">
    </span>
  </div>
</body>

脚本代码为：

$(document).ready(function(){


  $("#submit").click(function(){
    var searchInput = $("#search").val();
    var apiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&search='+searchInput+'&callback=?';



    $.ajax({
      type: "GET",
      url: apiUrl,
      dataType: "json",
      async: false,
      success: function(data){


        for (var n = 0; n <= data.length; n++){
          $("#results").append('<a href='+data[3][n]+' target="blank"><br><h1>'+data[1][n]+'</h1></a><br><h3>'+data[2][n]+'</h3><br>');

          //console.log(data[1][n]);
        }
        //console.log(data[3][n]);
      },
      error: function(err){
        alert('Critical Error'+err);
      },
    })
  });

  $("#search").bind('keypress', function(e){
    if(e.keyCode == 13){
      $('#submit').click();
    }
  })

});

任何帮助将不胜感激。谢谢各位。

--BlackBat023

【问题讨论】：

在 ajax 之前添加 $("#results").html(''); .. OR 最好在 for 循环之前添加 ajax 成功回调函数
做到了...谢谢@Mohamed-Yousef

标签： jquery api search

【解决方案1】：

您可以使用 empty() 与您的 append 内联，以便在添加新结果之前始终清除结果，如下所示：

var rslt = "";
for (var n = 0; n <= data.length; n++){
      rslt += '<a href='+data[3][n]+' target="blank"><br><h1>'+data[1][n]+'</h1></a><br><h3>'+data[2][n]+'</h3><br>';

      //console.log(data[1][n]);
}
$("#results").empty().append(rslt);

这是此方法组合的演示小提琴：https://jsfiddle.net/gn3tq4oc/

【讨论】：

嘿@mjw 我之前尝试过，会发生的情况是代码会在 for() 循环的每次迭代中清空元素。所以显示的唯一结果是数组中的最后一个。
那不正确，我猜你可能有rslt = '<a href...' 而不是rslt += '<a href...' - 第一个将在每次迭代时覆盖变量，+= 将附加。还要确保最终赋值 $("#results").empty().append(rslt); 在 for 循环之外。