先簡單講一下需求：頁面中會列出多行個人信息記錄，為方便查找，在頂層增加一個搜索欄，可根據用戶姓名查找記錄。
如果只想查看代碼，可跳過分析過程，文章底部提供了完整的代碼。
以下是我的編寫過程：
動態頁面，多條記錄均由forEach生成，結構如下：
<form name="userForm"> <table style="width:200px;"> <thead> <tr> <th> </th> <th> </th> <th>教師姓名</th> </tr> </thead> <tbody> <c:forEach items="${userList}" var="user" varStatus="itStatus"> <tr> <td class="cellBg-gary">${itStatus.index+1}</td> <td> <input type="checkbox" name="userId" value="${user.id}"/> </td> <td>${user.name}</td> </tr> </c:forEach> </tbody> </table> </form> 為了方便調試靜態頁面，可以先將web項目啟動，然后在瀏覽器中查看源代碼，復制form中的代碼，另存為一個本地HTML文件。
chrome操作如下：
為了看起來舒服一些，簡單的增加一些表格樣式：
<style type="text/css"> table{ border-collapse:collapse; text-align: center; } table, th, td{ border: 1px solid black; } </style> 接下來，我們在<thead>中增加一個搜索框：
<tr> <th colspan="3"> <input type="text" id="searchText"/> <input type="button" id="searchBtn" value="搜索"/> </th> </tr>
設置一個單擊事件的監聽：
$(function(){ $('#searchBtn').on('click', function(){ alert('search'); }); }); 這里有兩個建議：
1、為了避免代碼相互影響，盡量明確監聽的作用域
2、當你不確定當前的事件觸發者時（如：<td><a href="#" onclick=""</a></td>），可以alert($(this))來確定觸發元素
修改后的代碼如下：
$(function(){ $('#userForm').on('click', '#searchBtn', function(){ alert($(this).val() + ':' + $(this).html()); }); }); 我們可以通過$('#searchText').val()獲取文本框中輸入的數據，無難度，主要問題是怎么在頁面中查找與之匹配的元素：
為了提高效率，盡可能的避免使用each、replace和RegExp()，推薦使用jQuery :contains選擇器，具體用法為$("td:contains(str)")
這里遇到了一個問題：contains(str)中的str對象會被理解為字符串"str"，找到的解決方案是采用字符串拼接的方式，有更好的解決方案的前輩，請不吝賜教。
并且，為了準確查找，我們給需要查找的<td>標簽設置一個class屬性,則有：
<td class="userNameTd">${user.name}</td>
所以，獲取查找結果的語句為：
$("td.userNameTd:contains("+ $('#searchText').val() +")")
為了明確顯示查找結果，我采用的方案是先將<tbody>下的<tr>全部隱藏，然后再將結果所在的<tr>行顯示出來，
而且當輸入框中的值為空時，顯示出所有列。方法變為：
$(function(){ $('#userForm').on('click', '#searchBtn', function(){ if($('#searchText').val()){ $('#userForm').find('tbody tr').hide() $("td.userNameTd:contains("+ $('#searchText').val() +")").parent('tr').show(); }else{ $('#userForm').find('tbody tr').show(); } }); }); 至此，一個簡單的文字搜索已經初具雛形了。我們再來進行一些完善工作。
首先，為了更搜索關鍵字更醒目一些，我們可以改變一下$('#searchText').val()的背景顏色
我們先創建一個樣式：
.bg-y{ background-color: yellow; } 因為操作的是文字，而不是對象，所以不能增加class屬性，解決方法為采用 replace('str', '<span class="bg-y">'+str+'</span>');
對統一對象進行多次操作，可以先將對象賦值給一個變量。修改后的代碼為：
$(function(){ $('#userForm').on('click', '#searchBtn', function(){ var searchText = $('#searchText').val(); if(searchText){ $('#userForm').find('tbody tr').hide(); var tds = $("td.userNameTd:contains("+ $('#searchText').val() +")"); tds.html(tds.html().replace(searchText,'<span class="bg-y">'+searchText+'</span>')); tds.parent('tr').show(); } else { $('#userForm').find('tbody tr').show(); } }); }); 這時又遇到了一個問題，之前增加背景顏色的文字，不會取消背景色。所以，我們在每次事件發生時，執行一個cleanHighLight()函數,將搜索時增加的<span>再替換成原先的內容。
function cleanHighLight() { var tds = $('span.bg-y').parent(); var vCurrentText = $('span.bg-y').html(); if(!!tds.html()){ tds.html(tds.html().replace('<span class="bg-y">'+ vCurrentText +'</span>', vCurrentText )); } } 然后，感覺輸入文本之后，還需要點擊，這點不夠友好，我們能不能采用輸入文本即可動態搜索呢？
我們試著將監聽對象改變為輸入框'#searchText'，監聽事件變為'change'
$('#userForm').on('change', '#searchText', function(){ //alert($('#searchText').val()); $('#userForm').find('tbody tr').hide() $("td.userNameTd:contains("+ $('#searchText').val() +")").parent('tr').show(); }); 但結果是，必須在文本框失去焦點時才會觸發事件，并沒有達到預期。
通過查找資料，找到了解決方案：可同時綁定oninput 和onpropertychange事件。代碼如下：
$(function(){ $('#userForm').on('input propertychange', '#searchText', function(){ var searchText = $('#searchText').val(); cleanHighLight(); if(searchText){ $('#userForm').find('tbody tr').hide(); var tds = $("td.userNameTd:contains("+searchText +")"); tds.html(tds.html().replace(searchText,'<span class="bg-y">'+searchText+'</span>')); tds.parent('tr').show(); } else { $('#userForm').find('tbody tr').show(); } }); }); 另外，我們可以給searchText 增加一個$.trim()函數，避免誤輸入空格字符：
var searchText = $.trim($('#searchText').val());
最后，我們再給文本框增加一些簡單的HTML5元素
將 <input type="text" />標簽替換為 <input type="search" /> (增加了一個刪除按鈕)
增加一個autocomplete="on"的屬性，可以讓瀏覽器預測字段輸入
再增加一個占位符屬性，placeholder="例如：張三"
這些HTML5標簽在不同瀏覽器下，可能有不能的顯示效果，但是即使在ie6下，也不會影響搜索功能。
動態文字搜索功能，暫時先寫到這。
附完整代碼：
<!DOCTYPE html> <html> <head> <title>動態文字搜索</title> <meta charset='utf-8' /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ $('#userForm').on('input propertychange', '#searchText', function(){ var searchText = $.trim($('#searchText').val()); cleanHighLight(); if(searchText){ $('#userForm').find('tbody tr').hide(); var tds = $("td.userNameTd:contains("+ searchText +")"); if(!!tds.html()) { tds.html(tds.html().replace(searchText,'<span class="bg-y">'+searchText+'</span>')); } tds.parent('tr').show(); } else { $('#userForm').find('tbody tr').show(); } }); }); function cleanHighLight() { var tds = $('span.bg-y').parent(); var vSearchText = $('span.bg-y').html(); if(!!tds.html()){ tds.html(tds.html().replace('<span class="bg-y">'+vSearchText+'</span>', vSearchText)); } } </script> </head> <style type="text/css"> table{ border-collapse:collapse; text-align: center; } table, th, td{ border: 1px solid black; } .bg-y{ background-color: yellow; } </style> <body> <div id="container"> <form name="userForm" id="userForm"> <table> <thead> <tr> <th colspan="3"> <input type="search" id="searchText" autocomplete="on"/> </th> </tr> <tr> <th> </th> <th> </th> <th>姓名:</th> </tr> </thead> <tbody> <tr> <td>1</td> <td> <input type="checkbox" name="userId" value="05cacc57-cb8a-4ba7-a928-1d49a0f0cfc0"> </td> <td class="userNameTd">朝氣</td> </tr> <tr> <td>2</td> <td> <input type="checkbox" name="userId" value="111111111111111111111111111111111111"> </td> <td class="userNameTd">默認</td> </tr> <tr> <td>3</td> <td> <input type="checkbox" name="userId" value="403b76a5-22f9-470c-8d9c-d0becca9ff3d"> </td> <td class="userNameTd">管理員5</td> </tr> <tr> <td>4</td> <td> <input type="checkbox" name="userId" value="49adbf34-d9bc-4f5c-b440-cad07913afa1"> </td> <td class="userNameTd">王五</td> </tr> <tr> <td>5</td> <td> <input type="checkbox" name="userId" value="52dbff4d-976b-4e92-8b83-25b1fd4fe8c4"> </td> <td class="userNameTd">admin4real</td> </tr> <tr> <td>6</td> <td> <input type="checkbox" name="userId" value="6148129f-6682-41a5-b097-28d02e804a69"> </td> <td class="userNameTd">admin7</td> </tr> <tr> <td>7</td> <td> <input type="checkbox" name="userId" value="7bfbbf24-7f4a-4733-90d2-58b4611c3916"> </td> <td class="userNameTd">王五</td> </tr> <tr> <td>8</td> <td> <input type="checkbox" name="userId" value="8e2e427c-edf7-40e3-bcc1-18430549ca80"> </td> <td class="userNameTd">admin3</td> </tr> <tr> <td>9</td> <td> <input type="checkbox" name="userId" value="91072894-0c0c-43f8-b294-bbe1990531df"> </td> <td class="userNameTd">朝氣</td> </tr> <tr> <td>10</td> <td> <input type="checkbox" name="userId" value="9199bd7b-0861-4bcc-9c8c-7c8c938d41c0"> </td> <td class="userNameTd">王五</td> </tr> <tr> <td>11</td> <td> <input type="checkbox" name="userId" value="9200b2d4-79f3-4b71-a023-d67618ff0eba"> </td> <td class="userNameTd">admin2</td> </tr> <tr> <td>12</td> <td> <input type="checkbox" name="userId" value="a14cea40-02c3-479c-9ef0-d493d013c409"> </td> <td class="userNameTd">admin1Real</td> </tr> <tr> <td>13</td> <td> <input type="checkbox" name="userId" value="b903ea21-95d6-4390-9832-f7de83a8b6ba"> </td> <td class="userNameTd">朝氣</td> </tr> <tr> <td>14</td> <td> <input type="checkbox" name="userId" value="badf02fe-e494-479c-922c-dfa5967d21fb"> </td> <td class="userNameTd">王五</td> </tr> <tr> <td>15</td> <td> <input type="checkbox" name="userId" value="cc100fe0-65c9-41a2-95e2-612f4d18f6fd"> </td> <td class="userNameTd">張三</td> </tr> <tr> <td>16</td> <td> <input type="checkbox" name="userId" value="cd2e596b-5b45-4f08-a3c2-d95f7397003a"> </td> <td class="userNameTd">朝氣</td> </tr> <tr> <td>17</td> <td> <input type="checkbox" name="userId" value="d00d125f-95a6-4fb4-b209-a283773ddfd6"> </td> <td class="userNameTd">管理員5</td> </tr> <tr> <td>18</td> <td> <input type="checkbox" name="userId" value="fe76629d-d24d-4296-be05-bf2897f67066"> </td> <td class="userNameTd">ADMIN124</td> </tr> </tbody> </table> </form> </div> </body> </html> 以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
