在Ajax中如何在用户清空搜索框时删除搜索结果？

我正在学习Ajax并使用以下练习代码来显示搜索结果。但我注意到，一旦用户退格并清空搜索结果框，结果仍然存在。如果在用户清空搜索框后结果被完全删除，这将是理想的。所以当用户开始输入时，结果开始填充，当他清空盒子时，没有什么可显示的。我的代码是：在Ajax中如何在用户清空搜索框时删除搜索结果？

$('#search').keyup(function() { 
    var searchField = $('#search').val(), 
     myExp = new RegExp(searchField, "i"); 
    $.getJSON('data.json', function (data) { 
     var output = '<ul class = "searchresults">'; 
     $.each(data, function (key, val) { 
      if ((val.name.search(myExp) !== -1) || 
        (val.bio.search(myExp) !== -1)) { 
       output += '<li>'; 
       output += '<h2>' + val.name + '</h2>'; 
       output += '<img src="images/' + val.shortname + '_tn.jpg" alt = "' + val.name + '"/>'; 
       output += '<p>' + val.bio + '</p>'; 
       output += '</li>'; 
      } 
     }); 
     output += '</ul>'; 
     $('#update').html(output); 
    }); 
});

来源

2017-03-13 Hannan

也许你可以有条件地检查searchField'的'长度，当它为0，你不作任何AJAX调用所有，只需清空'＃update'元素，即'$（'＃update'）。empty（）'？ – Terry

尝试检查它是否每个键后最多是空的，如果它是你应该终止Ajax请求，并清空结果列表。检查可以在searchField声明之后添加以下代码：

if(searchField==""){ 
    $('#update').html(""); //to empty the result list 
    return;     //return is to abort the operation 
}

好运

来源

2017-03-13 21:19:14

在Ajax中如何在用户清空搜索框时删除搜索结果？

回答

相关问题