搜索结果隐藏表0

Question

I have a table and a search textbox. I am filtering the table when I type something in the searchbox using this script:

$(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();
        });
    });
});

My question is: How can I hide the table when there are no results from the search?

Answer 1

Something like this should work:

 $(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> 

It works counting the visible rows. If total length of this is 0, then hide parent table. Table is always showed at the beginning.