本文介绍如何将已有的输入框实时搜索功能扩展为支持页面加载时自动触发，确保预填充的搜索关键词能立即生效，提升用户体验与代码复用性。
本文介绍如何将已有的输入框实时搜索功能扩展为支持页面加载时自动触发，确保预填充的搜索关键词能立即生效，提升用户体验与代码复用性。
在 Web 开发中，一个常见的需求是：用户在搜索框中输入内容时，表格数据实时过滤；但若搜索框在页面加载时已带有初始值（例如通过 URL 参数、服务端渲染或缓存恢复），此时过滤逻辑必须立即执行一次，否则用户会看到未过滤的完整表格，造成体验割裂。
解决思路很清晰：将过滤逻辑抽离为独立函数，并在 DOM 就绪后主动调用一次，同时保留原有的事件监听。这样既避免了代码重复，又保证了初始化与交互的一致性。
以下是优化后的完整实现：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
function doFilter() {
const $input = $('#search');
const searchTerm = $.trim($input.val());
// 若输入为空，显示全部行，无需正则匹配
if (!searchTerm) {
$('#table tbody tr').show();
return;
}
// 构建多关键词全词匹配正则（忽略空格顺序，支持 AND 语义）
const keywords = searchTerm.split(/s+/).filter(k => k.length > 0);
const pattern = keywords.length
? '^(?=.*\b' + keywords.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 input', doFilter);
// 页面加载完成时立即执行一次（处理初始值）
doFilter();
});
✅ 关键改进说明：
- 使用 input 事件替代 keyup，兼容粘贴、语音输入、自动填充等场景；
- 增加空值判断，避免空搜索时生成无效正则导致异常；
- 对关键词做 filter(k => k.length > 0) 清洗，防止多余空格干扰正则构建；
- 使用 new RegExp(...) 更符合现代语法习惯（RegExp 构造函数亦可，但显式 new 更清晰）；
- 所有选择器在函数内按需获取，避免因 DOM 变化导致 $rows 缓存失效。
? 注意事项：
- 若表格数据量极大（如上千行），建议配合防抖（debounce）优化性能，但初始化调用无需防抖；
- 正则表达式对特殊字符（如 .、*、(）未做转义，如需支持用户输入元字符，请先对关键词进行 escapeRegExp() 处理；
- 确保 #search 和 #table 在 DOM 加载完成时已存在——这也是为何必须在 $(function(){...}) 内执行。
通过这一重构，你的搜索逻辑真正实现了“一次编写，处处生效”：既响应用户交互，也尊重页面初始状态，是 jQuery 项目中值得推广的实践模式。
