在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中如何在用戶清空搜索框時刪除搜索結果？

回答

相關問題