本文介绍如何将原本仅响应用户输入的 jquery 搜索过滤功能，扩展为在页面加载时即刻生效——无论搜索框是否已预填内容，都能立即筛选表格行。
本文介绍如何将原本仅响应用户输入的 jquery 搜索过滤功能，扩展为在页面加载时即刻生效——无论搜索框是否已预填内容，都能立即筛选表格行。
要让搜索过滤逻辑既响应实时输入，又在页面加载时自动触发，关键在于解耦逻辑与事件绑定：将核心过滤代码封装为独立函数，再分别在 keyup 事件和 DOM 就绪时调用它。
以下是优化后的完整实现：
function doFilter() {
const $input = $('#search');
const value = $.trim($input.val());
// 若输入为空，直接显示所有行，避免无效正则
if (!value) {
$('#table tbody tr').show();
return;
}
// 构建多关键词模糊匹配正则（支持空格分隔的多个词）
const words = value.split(/s+/).filter(w => w.length > 0);
const pattern = words.length
? '^(?=.*\b' + words.join('\b)(?=.*\b') + ').*$'
: '^.+$';
const reg = new RegExp(pattern, 'i');
const $rows = $('#table tbody tr');
$rows.show().filter(function() {
const text = $(this).text().replace(/s+/g, ' ').trim();
return !reg.test(text);
}).hide();
}
$(function() {
// 绑定实时搜索
$('#search').on('keyup', doFilter);
// 页面加载完成时立即执行一次（处理预填充内容）
doFilter();
});✅ 优势说明：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
- 使用 $(function(){...}) 确保 DOM 完全就绪后再执行；
- 添加空值判断，避免空搜索时生成非法正则或意外隐藏全部行；
- filter() 配合 show()/hide() 实现高效批量操作，性能优于循环手动控制；
- 正则构建逻辑更健壮：过滤空字符串词项，防止 (?=.*) 类错误。
⚠️ 注意事项：
- 若搜索框内容由服务端渲染（如 <input id="search" value="apple banana">），doFilter() 会在加载后立即生效；
- 如需支持中文、特殊符号等更复杂匹配，建议改用 includes() 或分词比对替代正则，避免正则转义风险；
- 在大型表格中，可考虑防抖（debounce）keyup 事件以提升响应性能。
通过这一重构，你的搜索功能真正实现了“所见即所得”——用户打开页面瞬间就能看到匹配结果，交互体验更自然、专业。
