前端实现模糊搜索功能

一、前言

最近在项目中遇到的业务需求，页面创建时把所有数据都加载了，这种情况下，使用后端SQL语句进行模糊，有点浪费时间，决定使用前端的输入框 + 按钮实现对数据的模糊搜索

二、HTML

    
    
          搜索
    


    

        

            

                
            
            ……省略
        
    

三、实现代码

    function searchEvent() {
        //获取input输入信息
        var zxyw = document.getElementById("zxyw").value;
        //获取ul
        var matter = document.querySelector("#mmatterInfo_data");
        //虎丘ul下所有li
        var lis = matter.querySelectorAll(".warning-element");
        for (let i = 0; i < lis.length; i++) {
            //li中的名称
            var name = lis[i].innerText;
            //判断是否匹配，如果不匹配，则隐藏
            if ("" != zxyw && name.indexOf(zxyw) < 0) {
                lis[i].style.display = 'none';
            } else {
                lis[i].style.display = '';
            }
        }
        //返回顶部（这里用到了滚动条，每次搜索后返回顶部）
        document.getElementById("matterTop").scrollTop = 0;
    }

四、实现效果