使用jQuery实现带提交按钮的表格实时搜索功能问题求助

错误原因 #

• 筛选逻辑中取文本的对象错误：filter回调内错误读取输入框的text()内容，输入框无innerText属性，返回值永远为空，导致非空关键词下所有行都命中隐藏规则
• 缺少输入框清空的事件监听，无法实现清空自动复原效果

修正后代码 #

HTML（仅修正了按钮拼写错误，原有逻辑不变） #

<input type="text" id="myInput" placeholder="Type to search">
<button type="button" onclick="searchKey()">Search</button>
<table id="table">
   <tr>
      <td>Apple</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Grapes</td>
      <td>Green</td>
   </tr>
   <tr>
      <td>Orange</td>
      <td>Orange</td>
   </tr>
</table>

JavaScript #

var $rows = $('#table tr');
function searchKey() {
    var val = $.trim($('#myInput').val()).replace(/ +/g, ' ').toLowerCase();
    $rows.show().filter(function() {
        // 改为读取当前遍历行的文本内容
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
}

// 新增输入框监听，内容为空时自动展示全部内容
$('#myInput').on('input', function() {
    if ($.trim($(this).val()) === '') {
        $rows.show();
    }
})

效果说明 #

1. 输入关键词后点击搜索按钮，会自动筛选出所有行文本包含关键词的表格行，比如输入p会展示Apple所在的行
2. 清空输入框内容时无需点击按钮，所有表格行自动恢复显示

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