一、前言在后台管理系统、数据展示平台、列表检索类项目中多条件复合筛选是刚需高频功能。单纯的关键词模糊搜索早已无法满足复杂业务场景用户往往需要结合分类、数值区间、时间范围、标签筛选等多重维度精准检索数据。本文将以FGO英灵角色数据管理列表为实战案例基于 jQuery 原生 JS 从零实现一套完整的多条件筛选系统涵盖关键词模糊搜索、职阶/作战距离精准筛选、战力区间筛选、时间范围筛选、输入防抖优化五大核心能力。同时深度拆解代码逻辑、复盘开发痛点、讲解性能优化思路适配新手学习与业务落地。二、项目需求与功能概述业务场景本次案例基于 FGO 英灵角色数据集包含阿尔托莉雅、贞德、吉尔伽美什等23个多版本英灵数据每条数据涵盖名称、全名、职阶、作战距离、武器、战力、技能、创建时间等完整字段需要实现可视化表格检索与筛选功能。核心功能清单模糊搜索根据英灵名称实时模糊匹配检索精准下拉筛选按职阶剑士/弓兵/枪兵等、作战距离近/中/远距精准筛选区间筛选支持战力数值自定义最大、最小区间筛选时间筛选支持时间段范围筛选、单日精准时间筛选性能优化数值区间输入防抖避免高频重复渲染多条件叠加所有筛选条件支持并行生效空条件自动忽略动态渲染筛选数据实时更新表格视图无刷新更新页面三、数据结构设计本次采用原生 JSON 数组存储模拟后端接口数据结构规整、字段语义清晰适配筛选逻辑开发。核心字段说明如下name通用名称模糊搜索字段realName完整官方名称position职阶编码映射为中文职阶range作战距离编码映射为中文距离类型power战力数值区间筛选核心字段createTime数据创建时间时间筛选字段数据特点同一名义角色存在多版本数据如阿尔托莉雅原版/黑呆/枪呆可完美测试模糊搜索的匹配精度。四、核心功能实现详解视图渲染函数封装单独封装 renderList 渲染函数统一处理数据遍历、字段映射、表格渲染实现数据与视图分离后续所有筛选只需传入过滤后的数组即可刷新视图代码复用性极强。核心亮点对编码字段做中文语义映射将后台数字编码1-9转化为用户可读的职阶、距离文本提升交互体验。同时处理空图片兜底展示避免页面样式塌陷。多条件筛选核心逻辑筛选核心采用 Array.filter() 高阶函数 逻辑与多条件叠加 实现是前端数据筛选的经典最优方案。核心设计思想空条件不拦截数据有条件精准匹配多条件同时生效。通过三元表达式实现条件智能判断未输入/未选择筛选条件时默认返回 true保留所有数据存在筛选条件时执行对应匹配规则过滤数据。五大筛选规则拆解名称模糊搜索使用 includes() 实现模糊匹配支持关键词片段检索职阶/距离精准筛选全等匹配编码值精准过滤分类数据战力区间筛选同时判断最大值、最小值实现闭区间数值过滤时间段筛选通过时间字符串比对实现区间时间过滤单日精准筛选精准匹配单条时间数据优先级兼容区间筛选事件监听与交互适配针对不同交互场景绑定对应事件兼顾实时性与流畅度名称输入框input 事件实时检索输入即刷新下拉选择框职阶/距离change 事件选择后立即筛选战力区间输入框防抖监听避免高频输入频繁渲染时间选择器change 事件选择时间后自动筛选确认按钮点击触发全量筛选兜底兼容所有场景性能防抖优化数值区间输入过程中用户连续按键会高频触发渲染函数频繁操作 DOM 会造成页面卡顿、性能损耗。因此引入防抖函数设置900ms延迟用户停止输入后才执行筛选渲染大幅减少 DOM 操作次数优化页面流畅度。核心原理通过定时器重置延时每次输入清空上一次定时器最终只执行最后一次有效输入的筛选逻辑。五、完整优化后源码可直接落地修复原有代码瑕疵图片渲染错误、逻辑冗余问题整合所有功能提供可直接复制运行的完整 JS 源码// 英灵模拟数据let operatorData [// 阿尔托莉雅系列{ id: 1, name: “阿尔托莉雅”, realName: “阿尔托莉雅·潘德拉贡”, position: “1”, range: “2”, weapon: “誓约胜利之剑”, power: 8960, skill: “黄金圣剑斩击全域破甲”, img: “”, createTime: “2024-03-16” },{ id: 2, name: “阿尔托莉雅”, realName: “阿尔托莉雅〔Alter〕”, position: “6”, range: “1”, weapon: “黑誓约胜利之剑”, power: 9120, skill: “漆黑魔剑爆发持续灼烧”, img: “”, createTime: “2024-07-02” },{ id: 3, name: “阿尔托莉雅”, realName: “阿尔托莉雅〔Lancer〕”, position: “3”, range: “6”, weapon: “圣枪伦戈米尼亚德”, power: 8750, skill: “圣枪穿刺禁锢敌方行动”, img: “”, createTime: “2024-11-25” },// 贞德系列{ id: 4, name: “贞德”, realName: “贞德·达尔克”, position: “7”, range: “2”, weapon: “救世圣旗”, power: 8680, skill: “神明庇护全队免伤护盾”, img: “”, createTime: “2024-04-10” },{ id: 5, name: “贞德”, realName: “贞德〔Alter〕”, position: “9”, range: “3”, weapon: “红莲漆黑之旗”, power: 9050, skill: “红莲业火范围持续轰炸”, img: “”, createTime: “2024-09-18” },// 尼禄系列{ id: 6, name: “尼禄”, realName: “尼禄·克劳狄乌斯”, position: “1”, range: “1”, weapon: “陨铁之鞴原初之火”, power: 8520, skill: “玫瑰剑舞高频连击压制”, img: “”, createTime: “2024-01-29” },{ id: 7, name: “尼禄”, realName: “尼禄〔花嫁〕”, position: “2”, range: “6”, weapon: “星辰煌灭圣剑”, power: 8810, skill: “繁花箭雨远程群体压制”, img: “”, createTime: “2024-12-07” },// 斯卡哈系列{ id: 8, name: “斯卡哈”, realName: “斯卡哈”, position: “3”, range: “5”, weapon: “贯穿死翔之枪”, power: 8870, skill: “死棘穿刺无视防御暴击”, img: “”, createTime: “2025-02-14” },{ id: 9, name: “斯卡哈”, realName: “斯卡蒂”, position: “5”, range: “6”, weapon: “雪原魔枪”, power: 8610, skill: “魔境结界区域禁锢减速”, img: “”, createTime: “2025-06-30” },// 吉尔伽美什系列{ id: 10, name: “吉尔伽美什”, realName: “吉尔伽美什”, position: “2”, range: “4”, weapon: “王之财宝”, power: 9300, skill: “宝库开启无尽兵器倾泻”, img: “”, createTime: “2025-01-05” },{ id: 11, name: “吉尔伽美什”, realName: “吉尔伽美什〔Caster〕”, position: “5”, range: “2”, weapon: “天地开辟乖离之星”, power: 9220, skill: “律法魔术封印敌方宝具”, img: “”, createTime: “2025-08-22” },// 伊什塔尔系列{ id: 12, name: “伊什塔尔”, realName: “伊什塔尔”, position: “2”, range: “4”, weapon: “天之公牛巨斧”, power: 9020, skill: “星辰陨落高空范围轰炸”, img: “”, createTime: “2025-03-09” },{ id: 13, name: “伊什塔尔”, realName: “艾蕾什基伽尔”, position: “3”, range: “3”, weapon: “冥界巨枪”, power: 8940, skill: “冥界冻土大范围控制”, img: “”, createTime: “2025-10-17” },// 摩根系列{ id: 14, name: “摩根”, realName: “摩根·勒·菲”, position: “5”, range: “6”, weapon: “妖精王之魔杖”, power: 8930, skill: “妖精结界持续法术侵蚀”, img: “”, createTime: “2026-01-23” },{ id: 15, name: “摩根”, realName: “摩根〔女王〕”, position: “6”, range: “1”, weapon: “妖精灭世圣剑”, power: 9100, skill: “狂怒妖力近身毁灭斩杀”, img: “”, createTime: “2026-04-08” },// 清姬系列{ id: 16, name: “清姬”, realName: “安珍清姬”, position: “6”, range: “1”, weapon: “焚世蛇火”, power: 8480, skill: “执念焚火近身持续灼烧”, img: “”, createTime: “2024-05-21” },{ id: 17, name: “清姬”, realName: “清姬〔泳装〕”, position: “3”, range: “2”, weapon: “碧波蛇矛”, power: 8350, skill: “水蛇禁锢控制敌方走位”, img: “”, createTime: “2024-08-13” },// 酒吞童子系列{ id: 18, name: “酒吞”, realName: “酒吞童子”, position: “6”, range: “5”, weapon: “鬼族魔刃”, power: 8790, skill: “鬼王狂气吸血续航作战”, img: “”, createTime: “2025-04-26” },{ id: 19, name: “酒吞”, realName: “酒吞童子〔夏日〕”, position: “4”, range: “1”, weapon: “暗夜鬼袭短刃”, power: 8650, skill: “隐匿突袭背击暴击秒杀”, img: “”, createTime: “2025-07-11” },// 迦尔纳系列{ id: 20, name: “迦尔纳”, realName: “迦尔纳”, position: “3”, range: “3”, weapon: “日轮神枪”, power: 9200, skill: “太阳神裁决单点必杀穿刺”, img: “”, createTime: “2025-11-04” },{ id: 21, name: “迦尔纳”, realName: “迦尔纳〔圣诞〕”, position: “5”, range: “2”, weapon: “圣夜魔法权杖”, power: 8430, skill: “圣光祝福全队灵力回复”, img: “”, createTime: “2026-02-18” },// 阿周那系列{ id: 22, name: “阿周那”, realName: “阿周那”, position: “2”, range: “4”, weapon: “不灭神弓”, power: 8900, skill: “千箭齐发全域远程清扫”, img: “”, createTime: “2026-03-25” },{ id: 23, name: “阿周那”, realName: “阿周那〔Alter〕”, position: “6”, range: “2”, weapon: “灭世魔弓”, power: 9180, skill: “狂气灭杀大范围毁灭冲击”, img: “”, createTime: “2026-05-14” }];let antishake null; // 防抖定时器// 表格渲染方法function renderList(list) {let html ‘’;list.forEach(item {// 职阶编码映射中文let posText {1: “剑士”, 2: “弓兵”, 3: “枪兵”, 4: “暗杀者”,5: “魔术师”, 6: “狂战士”, 7: “骑兵”, 8: “裁定者”, 9: “复仇者”}[item.position] || “未知职阶”;// 作战距离编码映射中文 let distance { 1: 近距离, 2: 中距离, 3: 远距离, 4: 超远距离, 5: 中近距离, 6: 中远距离 }[item.range] || 未知距离; html tr td${item.id}/td td${item.img ? item.img : 图片待上传}/td td${item.name}/td td${item.realName}/td td${posText}/td td${distance}/td td${item.weapon}/td td${item.power}/td td${item.skill}/td td${item.createTime}/td /tr }) $(#tableBody).html(html);}// 初始化渲染全部数据renderList(operatorData);// 多条件筛选核心方法function information() {// 获取所有筛选条件let name $(‘#name’).val().trim();let position $(‘#position’).val().trim();let range $(‘#range’).val().trim();let minPower $(‘#minPower’).val().trim();let maxPower $(‘#maxPower’).val().trim();let startTime $(‘#startTime’).val().trim();let endTime $(‘#endTime’).val().trim();let singleDate $(‘.date_input’).val().trim();// 多条件复合筛选 let filterData operatorData.filter(item { // 名称模糊筛选 let nameMatch name ? item.name.includes(name) : true; // 职阶精准筛选 let posMatch position ? item.position position : true; // 作战距离精准筛选 let rangeMatch range ? item.range range : true; // 战力区间筛选 let powerMatch (minPower maxPower) ? (item.power Number(minPower) item.power Number(maxPower)) : true; // 时间段筛选 let timeRangeMatch (startTime endTime) ? (item.createTime startTime item.createTime endTime) : true; // 单日精准时间筛选 let singleTimeMatch singleDate ? item.createTime singleDate : true; // 所有条件并行生效 return nameMatch posMatch rangeMatch powerMatch timeRangeMatch singleTimeMatch; }) // 渲染筛选后的数据 renderList(filterData);}// 事件绑定$(document).on(‘input’, ‘#name’, information);$(‘#position,#range’).change(information);$(‘.confirm-btn’).click(information);$(document).on(‘change’, ‘.date_input’, information);// 战力输入防抖监听$(document).on(‘input’, ‘#minPower,#maxPower’, function () {clearTimeout(antishake);antishake setTimeout(information, 900);})六、代码优化亮点与踩坑复盘优化亮点配置化映射将职阶、距离的编码映射改为对象配置写法替代冗长的 if-else代码更简洁、易拓展条件解耦将各筛选条件单独定义变量逻辑清晰便于后续增删筛选维度