搜索结果时隐藏表格0

Question

我有一个表格和一个搜索文本框。我过滤表时，我使用这个脚本在搜索框输入内容：

$(document).ready(function(){ 
    // Write on keyup event of keyword input element 
    $("#buscador").keyup(function(){ 

     var $rows1 = $('#tablaproyectos1 tbody>tr'); 
     $('#buscador').keyup(function() { 
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

      $rows1.show().filter(function() { 
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
       return !~text.indexOf(val); 
      }).hide(); 
     }); 
    }); 
}); 

我的问题是：我如何隐藏表时，有没有从搜索结果？

Answer 1

像这样的东西应该工作：

$(document).ready(function(){ 
 
    // Write on keyup event of keyword input element 
 
    $("#buscador").keyup(function(){ 
 

 
     var $rows1 = $('#tablaproyectos1 tbody>tr'); 
 
     $('#buscador').keyup(function() { 
 
      $('#tablaproyectos1').show(); 
 
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 
 

 
      $rows1.show().filter(function() { 
 
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
 
       return !~text.indexOf(val); 
 
      }).hide().addClass('hide'); 
 
      if ($('#tablaproyectos1 tbody>tr:visible').length == 0) { 
 
       $('#tablaproyectos1').hide(); 
 
      } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="buscador" /> 
 
<table id="tablaproyectos1" style="border: 2px solid blue;"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Esto es una prueba de celda</td> 
 
     </tr> 
 
    <tr> 
 
     <td>Texto de relleno</td> 
 
     </tr> 
 
    <tr> 
 
     <td>Otra celda de prueba</td> 
 
     </tr> 
 
    <tr> 
 
     <td>Suficiente para comprobar el buscador</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

它的工作原理计数可见行。如果这个总长度为0，则隐藏父表。表格始终显示在开头。