js前端检索框的实现

你知道的越多，你不知道的越多；本文仅做记录，方便以后备阅。希望也能帮到正在看这篇文章的你。

接着上次的分享之后，这两天在项目中又Get一个新技能，在前端搜索框实现检索功能，之前检索查询在项目中常规的写法是通过把用户输入的值传到后台接收，然后通过持久层连接数据库，根据SQL语句模糊查询，然后回值给前端页面，这次给大家分享一下不用通过后台直接在前台实现检索查询。

from表单下面给一个input输入框，给一个ID和onInput事件：

 <from action="" method="post" name="Form" id="Form">
    <input type="text" id="yunman" oninput="tableFilter()" name="keywords" placeholder="输入关键字"/>
    <table>
        <thead>    
            <tr>
                <th>编号</th>
                <th>姓名</th>   
            </tr>
        </thead>
        <tbody id="trs">
        <c:choose>
        <c:when test="${not empty varList}">
        <c:if test="${QX.cha == 1 }">
        <c:forEach items="${varList}" var="var">
            <tr>
                <td title="${var.id}" id="${var.id}">${var.id}</td>
                <td title="${var.name}" id="${var.name}">${var.name}</td>
            </tr>
        </c:forEach>
        </c:if>
        <c:if test="${QX.cha == 0 }">
            <tr>
                <td colspan="2" class="center">您无权查看</td>
            </tr>
        </c:if>
        </c:when>
        <c:otherwise>
            <tr class="main_info">
                <td colspan="2" class="center">没有相关数据</td>
            </tr>
        </c:otherwise>
        </c:choose>
        </tbody>
        <tfoot>
            <span>这是table的页脚</span>
        </tfoot>
    </table>
</from>

当用户在输入框输入条件语句查询时，oninput事件触发：

<script type="text/javascript">
    //自动检索
    function tableFilter() {
        var keyword = document.getElementById("yunman").value.toLowerCase().split(" ");
        var table = document.getElementById("trs");
        var ele;
        for (var r = 0; r < table.rows.length; r++) {
             ele = table.rows[r].innerHTML;
             var displayStyle = 'none';
             for (var i = 0; i < keyword.length; i++) {
                 if (keyword == "") { displayStyle = ""; break; }
                 if (ele.toLowerCase().indexOf(keyword[i]) > 0) {
                     displayStyle = '';
                 }else {
                     displayStyle = 'none';
                     break;
                 }
             }
             table.rows[r].style.display = displayStyle;
         }
    }
</script>

根据前端页面style.display = displayStyle;一个样式的属性，可以把值隐藏起来，这样就实现了我们所说的，自动检索。

---

欢迎大家评论转发，收藏！

由于水平有限，本博客难免有不足，恳请各位大佬不吝赐教！