前端实现模糊搜索功能

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

一、前言

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

二、HTML

&lt;div class="input-group"&gt;
    <input type="text" placeholder="搜索子项业务" class="input input-sm form-control"
           id="zxyw"&gt;
    <span class="input-group-btn" onclick="searchEvent()">
        <button type="button" class="btn btn-sm btn-white"> <i
                class="fa fa-search"></i> 搜索</button>
    </span>
</div>
<div style="height: 285px;overflow: auto;" id="matterTop">
    <ul id="mmatterInfo_data" class="sortable-list connectList agile-list">
        <li class="warning-element" th:each="smatter : ${smlist}"
            th:id="${smatter.id}">
            <h3 class="text--warning"><span th:text="${smatterStat.count}"/>
                <span th:text="${smatter.sname}"/>
            </h3>
            ……省略
        </li>
    </ul>
</div>

三、实现代码

    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 &amp;&amp; name.indexOf(zxyw) < 0) {
                lis[i].style.display = 'none';
            } else {
                lis[i].style.display = '';
            }
        }
        //返回顶部（这里用到了滚动条，每次搜索后返回顶部）
        document.getElementById("matterTop").scrollTop = 0;
    }