2017-12-18 69 views
0

我有一個輸入框(搜索框)來過濾我的html表格。我的查詢能夠過濾表好嗎但是當我清除搜索框不帶回了已經存在的數據如何過濾HTML表格 - JS

舉例來說,如果我有

MacBook 
Acer 

和我搜索對M

它顯示MacBook這是很好的

但是當我從搜索框中清除M,表仍然看起來像

代替

MacBook 
    Acer 

JS

<script> 
$(document).ready(function() { 
     var typingTimer;    //timer identifier 
     var doneTypingInterval = 100; //time in ms (5 seconds) 

     $("#query").on('keyup', function() { 
      clearTimeout(typingTimer); 
      if ($('#query').val()) { 
       typingTimer = setTimeout(doneTyping, doneTypingInterval); 
      } 
     }); 
    }); 

    function doneTyping() { 
     var key = $('#query').val(); 

      $.ajax({ 
       url: 'search/?query='+key, 
       type: 'GET', 
       beforeSend: function() { 
       // $("#table").slideUp('fast'); 

       }, 
       success: function (data) { 
        console.log(data); 
        $("#table").slideDown('fast'); 

        var table = $("#table tbody"); 

         table.html(""); 
         $.each(data, function(idx, elem){ 
          table.append(

           //appending rows here 

          ); 

         }); 




       }    

      }); 


} 
</script> 
+1

您只希望在輸入值爲val的情況下返回結果。如果它是空的,你將永遠不會調用ajax返回結果 –

+0

@LelioFaieta,我該如何得到這個修復?我是新來的Javascript – Griezmann

+0

請參閱下面的答案 –

回答

0

此代碼:

$("#query").on('keyup', function() { 
     clearTimeout(typingTimer); 
     if ($('#query').val()) { 
      typingTimer = setTimeout(doneTyping, doneTypingInterval); 
     } 
    }); 

被綁定到keyup事件(OK),但會看,如果$('#查詢')具有值:

if ($('#query').val()) { 

如果您清空輸入字段,則此條件將爲false。

只需刪除條件,這將工作。

$("#query").on('keyup', function() { 
    clearTimeout(typingTimer); 
    typingTimer = setTimeout(doneTyping, doneTypingInterval); 
});