如何在页面加载时自动执行 jQuery 搜索过滤逻辑-js教程-PHP中文网

如何在页面加载时自动执行 jQuery 搜索过滤逻辑

本文介绍如何将原本仅响应用户输入的 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等老旧浏览器的项目。

下载