模擬搜索需要實現以下功能：
1、用戶的模糊搜索不區分大小寫，需要小寫字母匹配同樣可以匹配到該字母的大寫單詞。
2、多關鍵詞模糊搜索，假設用戶關鍵詞以空格分隔，在關鍵詞不完整的情況下仍然可以匹配到包含該關鍵字的表格。
3、表格篩選，符合條件的表格展現，不符合條件的表格隱藏。
<!doctype html> <html> <head> <title>表格搜索</title> <meta charset="utf-8"> <style> html{font-family:楷體;} </style> </head> <body> 姓名：<input id='name' type='text'/> <input id='btn1' type='button' value='搜索'/> <table id='tab1' border="1" width="500" > <thead> <tr><td>ID</td><td>姓名</td><td>年齡</td></tr> </thead> <tbody> <tr><td>1</td><td>阿童木</td><td>30</td></tr> <tr><td>2</td><td>機器貓</td><td>44</td></tr> <tr><td>3</td><td>小叮當</td><td>53</td></tr> <tr><td>4</td><td>海雅</td><td>69</td></tr> <tr><td>5</td><td>祖魯</td><td>27</td></tr> <tr><td>6</td><td>JavaScript權威指南</td><td>28</td></tr> </tbody> </table> </body> </html>
【1、用戶的模糊搜索不區分大小寫，需要小寫字母匹配同樣可以匹配到該字母的大寫單詞。】思路：由於JS區分大小寫，需要將用戶輸入值與表格中的innerHTML值均轉換為小寫形式，再進行匹配，實現模糊匹配效果。函數toLowerCase()把字符串轉換為小寫。
JavaScript代碼：
window.onload=function() { var oTab=document.getElementById('tab1'); var oTxt=document.getElementById('name'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { for(var i=0;i<oTab.tBodies[0].rows.length;i++) { oTab.tBodies[0].rows[i].style.display='none'; if(oTxt.value.toLowerCase()==oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase()) { oTab.tBodies[0].rows[i].style.display='block'; } } } };
【2、多關鍵詞模糊搜索，假設用戶關鍵詞以空格分隔，在關鍵詞不完整的情況下仍然可以匹配到包含該關鍵字的表格。】思路：搜索詞通過split()函數進行分割，每個切割的單元search()函數檢測是否在表格單元的字符串值中存在。
window.onload=function() { var oTab=document.getElementById('tab1'); var oTxt=document.getElementById('name'); var oBtn=document.getElementById('btn1'); oBtn.onclick=function() { for(var i=0;i<oTab.tBodies[0].rows.length;i++) { oTab.tBodies[0].rows[i].style.display='none'; var sTab=oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase(); var sTxt=oTxt.value.toLowerCase(); var arr=sTxt.split(' '); for(var j=0;j<arr.length;j++) { if(sTab.search(arr[j])!==-1) { oTab.tBodies[0].rows[i].style.display='block'; } } } } };
錯誤的JavaScript代碼
oBtn.onclick=function() { for(var i=0;i<oTab.tBodies[0].rows.length;i++) { oTab.tBodies[0].rows[i].style.display='none'; var sTxt=oTxt.value.toLowerCase().split(' '); if(oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase().search(sTxt)!==-1) { oTab.tBodies[0].rows[i].style.display='block'; } }
(a)split()函數切割獲得由一連串字符串組成的數組。search()函數內的參數為需要檢索的字符串。(b)for循環內嵌套for循環時，若嵌套的for循環中包含兩個循環參數，需要注意嵌套的循環若定義變量與外部循環相同可能導致的邏輯問題。