JQuery根据关键字检索html元素并筛选显示
作者：米云网络
时间：2025-03-31
浏览：11
背景：标题比较唬人，实际上就是在文本框中输入关键字，通过关键字检索html元素，筛选后显示在界面上。
Html元素如下：
<div> <input type="text" id="searchBox"/> <ul id="dataSet"> <li>刘德华</li> <li>黄日华</li> <li>张学友</li> <li>谢霆锋</li> <li>陈奕迅</li> <li>陈冠希</li> <li>郑伊健</li> <li>郭富城</li> <li>黄秋生</li> <li>杜琪峰</li> <li>梁朝伟</li> </ul> </div>
JS代码如下：
$(function () {
$("#searchBox").keyup(function () { var value = $(this).val();
$("#dataSet li").each(function () {
$(this).hide(); if ($(this).text().indexOf($.trim(value)) >= 0) {
$(this).show();
}
});
});
});运行后的效果如图：
文章链接：https://www.yunscrm.cn/dongtai/165.html
文章标题：JQuery根据关键字检索html元素并筛选显示
声明： 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
文章标题：JQuery根据关键字检索html元素并筛选显示
声明： 所发布的内容，部分为原创文章，转载请注明来源，网络转载文章如有侵权请联系我们！
