本文實例講述了JavaScript實現的搜索及高亮顯示功能。分享給大家供大家參考，具體如下：
情景: 用來篩選列表中的數據, 由于單條數據很簡短, 沒有用php+mysql去實現篩選功能, 只用javascript進行篩選, 匹配的高亮, 或者將不匹配的隱藏掉
效果圖:
html:
<div class="contracts-header">名稱: <input type="text" value="" id="search_contract_name"></div><div class="contracts-header">代碼: <input type="text" value="" id="search_contract_code" placeholder="不區分大小寫"></div><div class="contracts-header"><button onclick="search()">查找</button></div><div id="contracts-list"> <ul> <li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li> <li><input type="checkbox" name="contract[]" value="code|name" /><span>name(code)</span></li> </ul></div>
javascript:
function search(){ var search_contract_name = $("#search_contract_name").val(); var search_contract_code = $("#search_contract_code").val(); if (search_contract_name && search_contract_code) { //兩個輸入框都有值 search_contract_code = search_contract_code.toLowerCase(); //不區分大小寫, 全部轉換為小寫, 下同 $("input[name='contract[]']").each( function () { var code_name = this.value; var search_code = code_name.toLowerCase().indexOf(search_contract_code); var search_name = code_name.toLowerCase().indexOf(search_contract_name); if (search_code >=0 && search_name >=0 ) { // this.nextSibling.style.backgroundColor = "#FFDEAD"; //高亮匹配到的 this.parentNode.style.display = 'block'; } else { // this.nextSibling.style.backgroundColor = ""; this.parentNode.style.display = 'none'; //隱藏不匹配的 } } ); } else if(search_contract_name || search_contract_code) { //只有一個輸入框有值 search_contract_name = search_contract_name.length ? search_contract_name : 'xxx'; //默認為xxx是因為不可能存在xxx search_contract_code = search_contract_code.length ? search_contract_code.toLowerCase() : 'xxx'; $("input[name='contract[]']").each( function () { var code_name = this.value; var search_code = code_name.toLowerCase().indexOf(search_contract_code); var search_name = code_name.toLowerCase().indexOf(search_contract_name); if (search_code >=0 || search_name >=0 ) { // this.nextSibling.style.backgroundColor = "#FFDEAD"; this.parentNode.style.display = 'block'; } else { // this.nextSibling.style.backgroundColor = ""; this.parentNode.style.display = 'none'; } } ); }}更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數據結構與算法技巧總結》、《JavaScript數學運算用法總結》、《JavaScript排序算法總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
