本文實例講述了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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
