原生JS 實現的input輸入時表格過濾

 需求：對input框進行鍵盤輸入後根據輸入的內容去匹配表格中指定的數據項，若存在相匹配的則只顯示匹配的數據項；
細節處理：監聽鍵盤輸入後給一定的緩衝時間避免發生頻繁的請求；
解決思路：給個定時器，當鍵盤開始輸入時啓動定時器，倘若在指定的時間內都不在進行輸入操作，則執行匹配操作，否則取消操作，同時限定輸入的字符串大於等於2位數字時再進行匹配操作，使過濾效果更精準一些。

<!--JS -->

var timer = null;  //定義定時器
function filterTable(el){
    clearTimeout(timer);
    var oTable = document.getElementById("oTable");
    //獲取需要匹配的元素集合
    var firstTdArr = oTable.getElementsByClassName("firstTd");
    if(el.value.length>1){ //限定匹配的字符至少爲兩位數
        var filterVal = el.value.toUpperCase();
        timer = setTimeout(function(){
            for(var i=0;i<firstTdArr.length;i++){
                //元素集合中存在匹配值時，顯示匹配的記錄，否則隱藏
                if (firstTdArr[i].innerHTML.toUpperCase().indexOf(filterVal) > -1) {
                    firstTdArr[i].parentNode.style.display = "";
                }else{
                    firstTdArr[i].parentNode.style.display = "none";
                }
            }
        },500);
    }else{
        //不滿足匹配所需字符數量時，恢復匹配之前的模樣
        for(var i=0;i<firstTdArr.length;i++){
            firstTdArr[i].parentNode.style.display = "";
        }
    }
}

<!-- HTML -->

<p><input type="text" onkeyup="filterTable(this)"/></p>
<table id="oTable">
    <tr>
        <th>匹配數據</th>
        <th>數據項一</th>
        <th>數據項二</th>
        <th>數據項三</th>
    </tr>
    <tr>
        <td class="firstTd">JS前端數據多條件篩選</td>
        <td>11過濾table數據</td>
        <td>111過濾table數據</td>
        <td>1111過濾table數據</td>
    </tr>
    <tr>
        <td class="firstTd">程序員不會英語怎麼行？</td>
        <td>22過濾table數據</td>
        <td>222過濾table數據</td>
        <td>2222過濾table數據</td>
    </tr>
    <tr>
        <td class="firstTd">前端代碼編譯後添加過濾</td>
        <td>33過濾table數據</td>
        <td>333過濾table數據</td>
        <td>3333過濾table數據</td>
    </tr>
    <tr>
        <td class="firstTd">大數據學習</td>
        <td>44過濾table數據</td>
        <td>444過濾table數據</td>
        <td>4444過濾table數據</td>
    </tr>
    <tr>
        <td class="firstTd">JS過濾HTML標籤</td>
        <td>55過濾table數據</td>
        <td>555過濾table數據</td>
        <td>5555過濾table數據</td>
    </tr>
    <tr>
        <td class="firstTd">大數據你瞭解多少</td>
        <td>66過濾table數據</td>
        <td>666過濾table數據</td>
        <td>6666過濾table數據</td>
    </tr>
</table>

<!-- CSS3 -->

table{border: 1px solid #ccc;width: 900px;}
table tr:nth-child(odd){background:#F4F4F4;}
table tr:nth-child(even){background:#fff;}

<!-- 效果 -->