本地列表筛选

要解决的具体问题

在前端 Demo 或静态页面里，列表数据通常直接写在 HTML 里。一旦需要按姓名、阶段、标签做搜索，就容易出现两种粗暴做法：要么给每个列表项手动绑 input 事件，用循环过滤 innerHTML；要么为了一个搜索框拉起整套后端接口与状态管理。对静态或小数据量场景来说，前者逻辑散、排序难维护，后者成本明显过高。

技能如何工作

本地列表筛选 面向这种场景，把筛选与排序收敛到列表自身。使用时先约定列表项上的 class，例如 name、stage，这些字段名会作为 valueNames 交给 List.js 解析。随后在列表容器上挂载 List 实例，并提供一个搜索输入框，即可获得即时筛选结果。若启用排序，同一实例也可承担列头点击排序的职责。

推荐实现步骤很直接：

• 引入 list.js
• 列表项按 valueNames 打上对应 class
• 初始化 new List(...) 并挂载搜索输入框
• 自测输入关键字是否即时过滤，排序按钮是否生效

适用边界与注意点

该方案适合静态或小数据 Demo 列表，不设计服务端搜索的替代。注意几点：

• 列表项必须稳定带有约定 class，否则 valueNames 取不到值
• 若 DOM 发生大幅动态变更，需要重建 List 实例或按文档刷新数据
• 不要在万级 DOM 节点上挂 List.js，浏览器性能会快速下降
• 与 Vue 虚拟 DOM 配合时，updated 之后需要重建实例，不能只在模板里挂一次就不管