前端实现模糊搜索功能

最新推荐文章于 2024-07-20 21:43:58 发布

Mr.LJie

最新推荐文章于 2024-07-20 21:43:58 发布

阅读量6.3k

点赞数 2

分类专栏： HTML 文章标签：前端 html javascript jquery

本文链接：https://blog.csdn.net/LiuQjie/article/details/125180723

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、前言

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

二、HTML

<div class="input-group">
    <input type="text" placeholder="搜索子项业务" class="input input-sm form-control"
           id="zxyw">
    <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 && name.indexOf(zxyw) < 0) {
                lis[i].style.display = 'none';
            } else {
                lis[i].style.display = '';
            }
        }
        //返回顶部（这里用到了滚动条，每次搜索后返回顶部）
        document.getElementById("matterTop").scrollTop = 0;
    }