$('#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>'+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="https://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>'+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>'+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> <form> <table> <thead> <tr> <th colspan="3"> <input type="search" autocomplete="on"/> </th> </tr> <tr> <th> </th> <th> </th> <th>姓名:</th> </tr> </thead> <tbody> <tr> <td>1</td> <td> <input type="checkbox" value="05cacc57-cb8a-4ba7-a928-1d49a0f0cfc0"> </td> <td>朝气</td> </tr> <tr> <td>2</td> <td> <input type="checkbox" value="111111111111111111111111111111111111"> </td> <td>默认</td> </tr> <tr> <td>3</td> <td> <input type="checkbox" value="403b76a5-22f9-470c-8d9c-d0becca9ff3d"> </td> <td>管理员5</td> </tr> <tr> <td>4</td> <td> <input type="checkbox" value="49adbf34-d9bc-4f5c-b440-cad07913afa1"> </td> <td>王五</td> </tr> <tr> <td>5</td> <td> <input type="checkbox" value="52dbff4d-976b-4e92-8b83-25b1fd4fe8c4"> </td> <td>admin4real</td> </tr> <tr> <td>6</td> <td> <input type="checkbox" value="6148129f-6682-41a5-b097-28d02e804a69"> </td> <td>admin7</td> </tr> <tr> <td>7</td> <td> <input type="checkbox" value="7bfbbf24-7f4a-4733-90d2-58b4611c3916"> </td> <td>王五</td> </tr> <tr> <td>8</td> <td> <input type="checkbox" value="8e2e427c-edf7-40e3-bcc1-18430549ca80"> </td> <td>admin3</td> </tr> <tr> <td>9</td> <td> <input type="checkbox" value="91072894-0c0c-43f8-b294-bbe1990531df"> </td> <td>朝气</td> </tr> <tr> <td>10</td> <td> <input type="checkbox" value="9199bd7b-0861-4bcc-9c8c-7c8c938d41c0"> </td> <td>王五</td> </tr> <tr> <td>11</td> <td> <input type="checkbox" value="9200b2d4-79f3-4b71-a023-d67618ff0eba"> </td> <td>admin2</td> </tr> <tr> <td>12</td> <td> <input type="checkbox" value="a14cea40-02c3-479c-9ef0-d493d013c409"> </td> <td>admin1Real</td> </tr> <tr> <td>13</td> <td> <input type="checkbox" value="b903ea21-95d6-4390-9832-f7de83a8b6ba"> </td> <td>朝气</td> </tr> <tr> <td>14</td> <td> <input type="checkbox" value="badf02fe-e494-479c-922c-dfa5967d21fb"> </td> <td>王五</td> </tr> <tr> <td>15</td> <td> <input type="checkbox" value="cc100fe0-65c9-41a2-95e2-612f4d18f6fd"> </td> <td>张三</td> </tr> <tr> <td>16</td> <td> <input type="checkbox" value="cd2e596b-5b45-4f08-a3c2-d95f7397003a"> </td> <td>朝气</td> </tr> <tr> <td>17</td> <td> <input type="checkbox" value="d00d125f-95a6-4fb4-b209-a283773ddfd6"> </td> <td>管理员5</td> </tr> <tr> <td>18</td> <td> <input type="checkbox" value="fe76629d-d24d-4296-be05-bf2897f67066"> </td> <td>ADMIN124</td> </tr> </tbody> </table> </form> </div> </body> </html>