js前端检索框的实现

                                              

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

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

 <from action="" method="post" name="Form" id="Form">
    <input type="text" id="yunman" οninput="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;一个样式的属性，可以把值隐藏起来，这样就实现了我们所说的，自动检索。

欢迎的大家评论转发。