条件搜索模块html,纯前端实现搜索功能

思路：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