思路:1.先获取搜索框的内容,
2.第二步获取要查询的内容,注意写到for循环里面(比如我是按照标题查询,先写for循环,逐一获得标题内容,即查询内容)
3.用mach()方法去匹配,不符合条件的加,display:none,隐藏掉该条数据
html目录结构大致如下:
-
任务:xxx项目开发
...
js:核心代码已标红
//搜索按钮点击时触发
$("#search").on("click",function(){
var searchContent = $("#searchContent").val();//获取input输入框值
var searchLen = $("#finished li").length;//获取查询条数,页面li的数目
for (var i=0; i
let searchText = $("#finished .panTitle span")[i].innerText;//获取要查询的内容,注意要写到for循环里面
if(searchText.match(searchContent)){
$("#finished li")[i].style.display='';
}else{
$("#finished li")[i].style.display='none';//不符合查询条件的当前数据隐藏
}
}
})
总结:本次查询适用纯前端页面的模糊查询,对于不需要后台数据返回的查询,采用纯前端查询,有利于减少后端请求,提高性能
缺点:本次查询只实现了连续查询,例如查询标题是:“前端页面开发”,输入“前端”,“开发”,任意连续字符可以查询到该条数据,但是输入
不连续字符如“前开”则查询不到,后续仍需继续优化,另外本页面如有错误之处,欢迎评论区指正!
标签:功能,前端,查询,获取,搜索,var,li,页面
来源: https://www.cnblogs.com/qdkfyym/p/13065625.html