纯前端实现搜索功能、模糊查询

参考链接：https://blog.csdn.net/weixin_30920513/article/details/97463450

思路：1.先获取搜索框的内容

　　　2.第二步获取要查询的内容，注意写到for循环里面（比如我是按照标题查询，先写for循环，逐一获得标题内容，即查询内容）

　　　3.用mach()方法去匹配，不符合条件的加，display:none,隐藏掉该条数据
css:

#noFound{
        color:#676a6c;
        text-align:center;
        padding:20px;
        display:none;
    
}

 html结构大致如下：

<div>
    <input type="text" id="searchContent" placeholder="搜索任务"/>
    <button id="search">搜索</button>
</div>
<div id="finished">
   <ul>
   　　<li>
      　　 <div class="panTitle">
              任务：<span>xxx项目开发</span>
           </div>
            <div>
             　　...
            </div>
       </li>
　　　　<p id="noFound">没有找到匹配的记录</p> //一开始display 默认为none
    </ul>
</div>

js：核心代码已标红

　　　　//搜索　
　　　　　　function search(){
　　　　　　　　　 var searchContent = $("#searchContent").val();//获取input输入框值
                var searchLen = $("#finished li").length;//获取查询条数，页面li的数目
　　　　　　　　 　var searchAll = $("finished .planTitle span").text();
                for (var i=0; i<searchLen;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';//不符合查询条件的当前数据隐藏    
                    }
                }
　　　　　　　　　　if(searchAll.match(searchContent)){
　　　　　　　　　　　　$("#noFound").css("display","none");
　　　　　　　　　　}else{
　　　　　　　　　　　　$("#noFound").css("display","block");
　　　　　　　　　　}
　　　　　　　　}
　　　　　　//搜索按钮点击时触发
           $("#search").on("click",function(){
　　　　　　　　　　search();//调用
 　　　　　　})

　　　　　　//实现搜索内容随着input输入框实时查询，监听input输入框搜索内容实现查询
　　　　　　　$("#searchContent").bind("input propertychange",function(){
　　　　　　　　　search();　//调用搜索方法　　　　　　
　　　　　　　})

代码非常简单，此时监听搜索回车方法可以去掉了，因为监听input输入框搜索已经涵盖了监听回车事件的功能，

关于propertychange，propertychange 事件是实时触发，即每增加或删除一个字符就会触发，更加详细的了解参考小白点

博主的文章即时反应的input和propertychange方法

 

总结：本次查询适用纯前端页面的模糊查询，对于不需要后台数据返回的查询，采用纯前端查询，有利于减少后端请求，提高性能

缺点：本次查询只实现了连续查询，例如查询标题是：“前端页面开发”，输入“前端”，“开发”，任意连续字符可以查询到该条数据，

但是输入不连续字符如“前开”则查询不到，后续仍需继续优化，另外本页面如有错误之处，欢迎评论区指正！