кнопка Reset для JQuery строки таблицы фильтра

Question

У меня есть таблица на моей странице, и фильтрование текстовое поле над ним, который работает фантастически, используя следующий JQuery:

 $("#searchInputCompanies").keyup(function() { 
      //split the current value of searchInput 
      var data = this.value.split(" "); 
      //create a jquery object of the rows 
      var jo = $("#cBody").find("tr"); 
      if (this.value == "") { 
       jo.show(); 
       return; 
      } 
      //hide all the rows 
      jo.hide(); 

      //Recusively filter the jquery object to get results. 
      jo.filter(function(i, v) { 
       var $t = $(this); 
       for (var d = 0; d < data.length; ++d) { 
        if ($t.text().toLowerCase().indexOf(data[d].toLowerCase()) > -1) { 
         return true; 
        } 
       } 
       return false; 
      }) 
      //show the rows that match. 
      .show(); 

      $('#selectAllCompanies').prop('checked', ''); 
     }).focus(function() { 
      this.value = ""; 
      $(this).css({ 
       "color": "black" 
      }); 
      $(this).unbind('focus'); 
     }).css({ 
      "color": "#C0C0C0" 
     }); 

Как я могу настроить кнопку Сбросить фильтр для этого?

Answer 1

Гм, это довольно неудачная реализация :( Во-первых, вам нужно изменить событие для $("#searchInputCompanies"), чтобы сделать все это немного проще. Так, он станет $("#searchInputCompanies").on("input", function() {...

$("#resetAction").on("whatEventYouWant", function() { 
    $("#searchInputCompanies").val("").trigger("input"); 
}); 

Это вызовет input событие на $("#searchInputCompanies"), и поскольку текстовое поле пуст, все строки станут видимыми.