jQuery列表文字实时筛选
jQuery 的文字筛选功能，说简单也真不复杂，但用得好，体验能提升不少。一个输入框加一个列表，配上几行筛选逻辑，就能让用户输入文字实时过滤结果，响应也快，代码也简单。
常用场景像搜索联系人、商品列表这种，输入几个字，马上只显示匹配的项。用$('#searchInput')绑定keyup事件，对每个元素做遍历，匹配就show()，否则hide()。
逻辑长这样：
$('#searchInput').on('keyup', function() {
const searchText = $(this).val().toLowerCase();
$('#listContainer li').each(function() {
const itemText = $(this).text().toLowerCase();
$(this).toggle(itemText.includes(searchText));
});
});是不是挺直观？基本几分钟就能搭好。啦，如果你列表长，建议加个节流或者防抖，避免每次按键都疯狂触发。视觉上也可以加点动画，提升交互感。
想扩展？加个模糊匹配、多条件过滤都不难。还有现成的插件比如Filterizr，功能更丰富，样式也好看。
如果你常写后台列表、内容搜索，或者懒得上 Vue/React 那一套，这种 jQuery 小功能还挺好用的。老工具新玩法，用着也顺手。
下载地址
用户评论
