jQuery 实时模糊搜索实战教程（无防抖原生写法）-北京尧图网络

一、前言在后台管理系统开发中列表顶部搜索框是必备功能用户输入关键词就能实时过滤表格数据提升查找效率。很多初学者会直接监听输入框 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() 实现前端本地模糊匹配通过判断筛选数组长度区分有无搜索结果给出对应提示将过滤后的新数组传入渲染函数刷新页面列表数据。

jQuery 实时模糊搜索实战教程（无防抖原生写法）

相关推荐

AionUi完全指南：3分钟掌握本地AI图形化界面的终极方案

现代C++设计模式代码审查指南：识别和修复常见模式实现错误

5步将电视盒子改造为Armbian服务器：释放Amlogic设备潜能

更多资讯

Openship连接自己的VPS教程：从SSH接入到首次部署全记录

System: {System Name}

如何配置 MCP Toolbox 的 Secure Parameters 让应用端敏感参数带外传递给工具

Kubescape Rego 与 CEL 对等性验证：regocelparity 夹具目录的设计、实现与刷新指南

LiteParse Python 使用指南：基于 PDFium 与 Rust 内核的高性能文档解析 SDK

git-bug webui 命令完全指南：在浏览器中管理分布式 Bug 跟踪器

今日更新

基于高阶循环谱的MPSK载波频率估计与MATLAB实现

MiniPdf方：.NET开源Office转PDF的高效解决方案

Solon AI v3.10：Java全栈智能体开发框架解析

本周精选

AI驱动的自动化专利分析平台技术解析

LeetCode-Go 题解：1252. Cells with Odd Values in a Matrix（奇数值单元格计数）双解法剖析

在线答疑系统Java毕设实战：Spring Boot前后端分离与状态流转

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？