JQuery搜索过滤器清空输入值后未更新，如何解决？

问题出在：你清空输入框后，只是把内容设成了空，但没触发表格过滤的逻辑——当前过滤代码只绑定在输入框的keyup事件上，只有敲键盘的时候才会执行。

给你两种可行的解决方法：

方法一：手动触发keyup事件 #

清空输入框后，直接触发输入框的keyup事件，让已有的过滤逻辑自动执行：

$(document).ready(function(){

  $("#SearchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#Data tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });

  $("#clearSearch").click(function(){
    $("#SearchInput").val("");
    // 手动触发keyup事件，触发过滤逻辑
    $("#SearchInput").trigger("keyup");
  });

});

方法二：抽离过滤逻辑为独立函数 #

把过滤表格的代码单独写成一个函数，不管是输入框keyup还是清空按钮点击，都调用这个函数，代码复用性更强：

$(document).ready(function(){
  // 独立的表格过滤函数
  function filterTable() {
    var value = $("#SearchInput").val().toLowerCase();
    $("#Data tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  }

  // 输入框keyup时调用过滤函数
  $("#SearchInput").on("keyup", filterTable);

  $("#clearSearch").click(function(){
    $("#SearchInput").val("");
    // 清空后调用过滤函数
    filterTable();
  });

});

第一种方法改动最小，适合快速解决问题；第二种方法更利于后续维护，要是以后还有其他需要触发表格过滤的场景（比如筛选下拉框、重置按钮等），直接调用filterTable()就行。

内容的提问来源于stack exchange，提问作者MarcusDeroy