一、前言在后台管理系统开发中列表顶部搜索框是必备功能用户输入关键词就能实时过滤表格数据提升查找效率。很多初学者会直接监听输入框 input 事件每输入一个字符立刻执行筛选逻辑实现即时搜索效果。本文基于 jQuery 完整实现无防抖实时模糊搜索拆解每一段代码含义适合前端入门学习。二、完整页面代码html预览jQuery实时搜索分类标题script // 全局存储所有原始列表数据 let listData [] // 监听输入框实时输入事件 $(#titleb).on(input, function () { fieldofsearch() }) // 搜索核心处理函数 function fieldofsearch() { // 1. 获取输入框内容去除首尾空格 let data $(#titleb).val().trim(); // 2. filter遍历原始数据匹配关键词 let Filterpackage listData.filter(function(item) { // 判断当前条目的标题是否包含输入关键词 let result item.title.includes(data) // 返回匹配结果true则保留这条数据 return result; }) // 3. 判断筛选后数据是否为空弹出对应提示 if (Filterpackage.length 0) { Toast.showError(无搜索结果) } else { Toast.showSuccess(搜索成功) } // 4. 将筛选后的新数据传入分页渲染函数刷新列表 initPagination(Filterpackage) } // 模拟弹窗提示组件 const Toast { showSuccess: msg console.log(成功提示 msg), showError: msg console.log(错误提示 msg) } // 模拟表格分页渲染函数 function initPagination(arr) { console.log(渲染列表数据, arr) } /script三、逐段代码详细解析 1. HTML 搜索布局 html 预览分类标题classsearch_item给搜索区域统一样式类方便布局调整 label文字说明标识输入框用途 idtitleb唯一标识输入框jQuery 通过 id 快速获取元素 placeholder输入框默认提示文字引导用户输入关键词。 2. 全局数据源变量 js 运行 let listData []//搜索数据 全局数组用来存放页面完整的原始列表数据。 筛选操作永远基于这份完整数据不会丢失全部内容清空搜索词时可以还原所有列表。 3. 输入框实时监听 js 运行 $(#titleb).on(input, function () { fieldofsearch() }) on(input, 回调)监听输入框的输入事件每输入、删除一个字符都会立刻触发 每次触发直接调用搜索函数 fieldofsearch()实现一边打字一边实时筛选。 补充区分input vs change input实时触发适合实时搜索 change只有输入框失去焦点才触发无法即时筛选。 4. 核心搜索函数 fieldofsearch ① 获取输入内容 js 运行 let data $(#titleb).val().trim(); $(#titleb).val()获取输入框内用户输入的文字 .trim()清除文字首尾空格避免用户输入全空格产生无效搜索。 ② filter 遍历筛选数据 js 运行 let Filterpackage listData.filter(function(item){ let result item.title.includes(data) return result; }) Array.filter()数组遍历方法自动循环数组每一条数据 回调参数 item代表当前循环到的单条列表对象 item.title取当前条目里的标题字段用来和关键词匹配 includes(data)模糊匹配方法判断标题字符串中是否包含输入的关键词 return result返回布尔值true 代表这条数据匹配成功会存入新数组 Filterpackage。 ③ 判断搜索结果并提示 js 运行 if(Filterpackage.length 0){ Toast.showError(无搜索结果) }else{ Toast.showSuccess(搜索成功) } Filterpackage 是筛选完成后的新数组 length 0数组为空说明没有匹配到任何数据弹出错误提示 数组长度大于 0存在匹配数据弹出成功提示。 ④ 重新渲染列表 js 运行 initPagination(Filterpackage) 把筛选后的数组传给分页渲染函数页面会根据新数据重新渲染表格、分页展示搜索后的内容。 四、两种搜索写法对比拓展知识点 本文无防抖实时搜索 每输入一个字符立刻筛选响应速度快缺点数据量大时频繁执行筛选会轻微卡顿。 带防抖定时器搜索上一篇代码 使用 setTimeout 延迟执行停止输入一段时间后再搜索减少执行次数性能更好项目开发更推荐。 五、代码优化小技巧 增加空关键词判断输入框清空时自动恢复全部数据 js 运行 let data $(#titleb).val().trim(); if (!data) { initPagination(listData); return; } 简化 filter 回调使用箭头函数简写 js 运行 let Filterpackage listData.filter(item item.title.includes(data)) 六、总结 使用 input 事件监听输入框实现实时搜索 Array.filter() 遍历数组搭配 includes() 实现前端本地模糊匹配 通过判断筛选数组长度区分有无搜索结果给出对应提示 将过滤后的新数组传入渲染函数刷新页面列表数据。