一、项目背景与需求在后台管理系统列表页面中单一搜索已经无法满足业务需求实际开发中几乎都是多条件联合筛选。本次实战实现的功能标题模糊搜索输入关键词实时匹配列表标题日历时间段筛选选择开始时间、结束时间筛选指定区间内的数据双条件同时生效标题 时间同时匹配防抖优化避免输入频繁触发搜索提升页面性能智能提示搜索成功/无结果对应弹窗提示空条件不弹窗筛选后重载分页根据筛选结果重新渲染列表。二、页面结构 HTML日历搜索组件包含自定义日历弹窗结构、隐藏域存时间、搜索展示文本是典型的后台时间段筛选布局创建时间开始时间 ~ 结束时间结构讲解 - 隐藏 input 框startTime / endTime不展示在页面专门用来存储用户选择的时间作为筛选条件 - date_input_box展示用户已选的时间范围默认显示占位文字 - calendar_popup双层日历容器实现左右双日历选择时间段。 三、核心 JS 逻辑多条件防抖搜索 实现输入标题触发防抖搜索、选择时间后联动搜索、标题时间双重匹配筛选。 // 全局数据源、定时器变量 let listData [] // 所有原始列表数据 let currentEditId // 防抖定时器ID// 1. 标题输入框监听触发搜索$(‘#titleb’).on(‘input’, function () {doSearch();});// 2. 核心统一搜索函数多条件联合筛选function doSearch() {// 清除上一次定时器实现防抖clearTimeout(currentEditId);// 延迟900ms执行搜索防止频繁触发 currentEditId setTimeout(function () { // 1. 获取所有搜索条件 // 标题关键词 let title $(#titleb).val().trim(); // 时间段 let startTime $(#startTime).val().trim(); let endTime $(#endTime).val().trim(); // 2. 多条件筛选数据 let result listData.filter(function (item) { // 条件1标题模糊匹配 let titleMatch item.title.includes(title); // 条件2时间匹配默认放行不选时间则不限制 let timeMatch true; // 只有开始时间和结束时间都存在才进行时间区间筛选 if (startTime endTime) { let itemTime item.createtime; // 判断数据时间是否在选择的区间内 timeMatch itemTime startTime itemTime endTime; } // 两个条件同时满足才算匹配成功 return titleMatch timeMatch; }); // 3. 搜索结果提示 if (result.length 0) { // 无匹配数据 Toast.showError(没有搜索结果); } else { // 有搜索条件且匹配成功弹出成功提示 if (title || startTime || endTime) { Toast.showSuccess(搜索成功); } } // 4. 重新渲染分页和列表 initPagination(result); }, 900);}// 模拟提示框、分页渲染函数const Toast {showSuccess: (msg) console.log(“成功” msg),showError: (msg) console.log(“失败” msg)}function initPagination(arr) {console.log(“最新筛选列表”, arr)}四、逐行核心逻辑超详细解析防抖机制900ms 延迟搜索clearTimeout(currentEditId);currentEditId setTimeout(function(){…},900)用户打字过程中会持续清除定时器停止输入900毫秒后才执行一次搜索。大幅减少筛选次数优化浏览器性能比无防抖搜索更适合正式项目。双条件联合筛选逻辑标题匹配item.title.includes(title)模糊查询输入部分关键词即可匹配对应标题数据。时间匹配核心重点默认 timeMatch true用户不选择时间时不限制时间只按标题搜索当 开始时间、结束时间同时存在 时开启时间区间筛选判断列表数据的创建时间 createtime 是否在所选区间内最终返回 titleMatch timeMatch两个条件必须同时满足。人性化提示逻辑筛选结果为空 → 固定提示「没有搜索结果」筛选结果不为空且用户输入/选择了条件 → 提示「搜索成功」用户未输入任何条件、默认刷新页面 → 不弹出成功提示避免干扰体验。分页重载initPagination(result)将筛选后的全新数组传入分页函数实现列表实时更新是后台列表搜索的标准写法。五、功能亮点面试/作业加分点多条件并行筛选支持单独搜标题、单独搜时间、标题时间组合搜索智能时间判断不选时间则不限制时间区间逻辑严谨防抖性能优化900ms 延迟兼顾流畅度与性能精准提示交互空搜索、有结果、无结果区分提示用户体验更好结构解耦统一 doSearch() 函数所有搜索入口共用一套筛选逻辑便于维护。六、总结本次实现的 标题日历时间段多条件防抖搜索 是企业级后台最常用的筛选方案通过隐藏域存储时间参数配合双日历选择实现时间段筛选使用 filter 数组筛选 includes 模糊匹配完成标题搜索逻辑与运算 实现多条件同时生效定时器防抖解决高频输入卡顿问题统一封装搜索函数代码复用性高适合项目迭代开发。