2017-12-18 6 views
0

私はHTMLテーブルをフィルタリングする入力ボックス(検索ボックス)を持っています。私のクエリは大丈夫テーブルをフィルタリングすることができますが、私は、検索ボックスをオフにしたときに、私はHTMLテーブルをフィルタリングする方法 - JS

MacBook 
Acer 

を持っていると私はM

を検索する場合には、例えば

を既存のデータを戻すしませんそれは

罰金ですが、私は検索ボックスからMをクリアしたときに、テーブルはまだ

のように見える MacBookを表示します

代わり

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になります。

if条件を削除するだけで問題ありません。

$("#query").on('keyup', function() { 
    clearTimeout(typingTimer); 
    typingTimer = setTimeout(doneTyping, doneTypingInterval); 
}); 
関連する問題