jQuery實(shí)現(xiàn)動態(tài)文字搜索功能
先簡單講一下需求：頁面中會列出多行個(gè)人信息記錄，為方便查找，在頂層增加一個(gè)搜索欄，可根據(jù)用戶姓名查找記錄。
如果只想查看代碼，可跳過分析過程，文章底部提供了完整的代碼。
以下是我的編寫過程：
動態(tài)頁面，多條記錄均由forEach生成，結(jié)構(gòu)如下：
<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>
為了方便調(diào)試靜態(tài)頁面，可以先將web項(xiàng)目啟動，然后在瀏覽器中查看源代碼，復(fù)制form中的代碼，另存為一個(gè)本地HTML文件。
chrome操作如下：
為了看起來舒服一些，簡單的增加一些表格樣式：
<style type="text/css">
table{
border-collapse:collapse;
text-align: center;
}
table, th, td{
border: 1px solid black;
}
</style>
接下來，我們在<thead>中增加一個(gè)搜索框：
<tr>
<th colspan="3">
<input type="text" id="searchText"/>
<input type="button" id="searchBtn" value="搜索"/>
</th>
</tr>
設(shè)置一個(gè)單擊事件的監(jiān)聽：
$(function(){
$('#searchBtn').on('click', function(){
alert('search');
});
});
這里有兩個(gè)建議：
1、為了避免代碼相互影響，盡量明確監(jiān)聽的作用域
2、當(dāng)你不確定當(dāng)前的事件觸發(fā)者時(shí)（如：<td><a href="#" onclick=""</a></td>），可以alert($(this))來確定觸發(fā)元素
修改后的代碼如下：
$(function(){
$('#userForm').on('click', '#searchBtn', function(){
alert($(this).val() + ':' + $(this).html());
});
});
我們可以通過$('#searchText').val()獲取文本框中輸入的數(shù)據(jù)，無難度，主要問題是怎么在頁面中查找與之匹配的元素：
為了提高效率，盡可能的避免使用each、replace和RegExp()，推薦使用jQuery :contains選擇器，具體用法為$("td:contains(str)")
這里遇到了一個(gè)問題：contains(str)中的str對象會被理解為字符串"str"，找到的解決方案是采用字符串拼接的方式，有更好的解決方案的前輩，請不吝賜教。
并且，為了準(zhǔn)確查找，我們給需要查找的<td>標(biāo)簽設(shè)置一個(gè)class屬性,則有：
<td class="userNameTd">${user.name}</td>
所以，獲取查找結(jié)果的語句為：
$("td.userNameTd:contains("+ $('#searchText').val() +")")
為了明確顯示查找結(jié)果，我采用的方案是先將<tbody>下的<tr>全部隱藏，然后再將結(jié)果所在的<tr>行顯示出來，
而且當(dāng)輸入框中的值為空時(shí)，顯示出所有列。方法變?yōu)椋?/p>
$(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();
}
});
});
至此，一個(gè)簡單的文字搜索已經(jīng)初具雛形了。我們再來進(jìn)行一些完善工作。
首先，為了更搜索關(guān)鍵字更醒目一些，我們可以改變一下$('#searchText').val()的背景顏色
我們先創(chuàng)建一個(gè)樣式：
.bg-y{
background-color: yellow;
}
因?yàn)椴僮鞯氖俏淖?，而不是對象，所以不能增加class屬性，解決方法為采用 replace('str', '<span class="bg-y">'+str+'</span>');
對統(tǒng)一對象進(jìn)行多次操作，可以先將對象賦值給一個(gè)變量。修改后的代碼為：
$(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();
}
});
});
這時(shí)又遇到了一個(gè)問題，之前增加背景顏色的文字，不會取消背景色。所以，我們在每次事件發(fā)生時(shí)，執(zhí)行一個(gè)cleanHighLight()函數(shù),將搜索時(shí)增加的<span>再替換成原先的內(nèi)容。
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 ));
}
}
然后，感覺輸入文本之后，還需要點(diǎn)擊，這點(diǎn)不夠友好，我們能不能采用輸入文本即可動態(tài)搜索呢？
我們試著將監(jiān)聽對象改變?yōu)檩斎肟?#searchText'，監(jiān)聽事件變?yōu)?change'
$('#userForm').on('change', '#searchText', function(){
//alert($('#searchText').val());
$('#userForm').find('tbody tr').hide()
$("td.userNameTd:contains("+ $('#searchText').val() +")").parent('tr').show();
});
但結(jié)果是，必須在文本框失去焦點(diǎn)時(shí)才會觸發(fā)事件，并沒有達(dá)到預(yù)期。
通過查找資料，找到了解決方案：可同時(shí)綁定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 增加一個(gè)$.trim()函數(shù)，避免誤輸入空格字符：
var searchText = $.trim($('#searchText').val());
最后，我們再給文本框增加一些簡單的HTML5元素
將 <input type="text" />標(biāo)簽替換為 <input type="search" /> (增加了一個(gè)刪除按鈕)
增加一個(gè)autocomplete="on"的屬性，可以讓瀏覽器預(yù)測字段輸入
再增加一個(gè)占位符屬性，placeholder="例如：張三"
這些HTML5標(biāo)簽在不同瀏覽器下，可能有不能的顯示效果，但是即使在ie6下，也不會影響搜索功能。
動態(tài)文字搜索功能，暫時(shí)先寫到這。
附完整代碼：
<!DOCTYPE html>
<html>
<head>
<title>動態(tài)文字搜索</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">默認(rèn)</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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
- jquery實(shí)現(xiàn)靜態(tài)搜索功能(可輸入搜索文字)
- JS實(shí)現(xiàn)搜索框文字可刪除功能
- javascript搜索框點(diǎn)擊文字消失失焦時(shí)文本出現(xiàn)
- 利用jQuery實(shí)現(xiàn)可輸入搜索文字的下拉框
- JavaScript前端頁面搜索功能案例【基于jQuery】
- jQuery Jsonp跨域模擬搜索引擎
- jquery中用jsonp實(shí)現(xiàn)搜索框功能
- JQuery+JS實(shí)現(xiàn)仿百度搜索結(jié)果中關(guān)鍵字變色效果
- 基于jquery的頁面劃詞搜索JS
- jquery+json實(shí)現(xiàn)的搜索加分頁效果
- jQuery單頁面文字搜索插件jquery.fullsearch.js的使用方法
相關(guān)文章
JavaScript實(shí)現(xiàn)鼠標(biāo)經(jīng)過表格行給出顏色標(biāo)識
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)鼠標(biāo)經(jīng)過表格行給出顏色標(biāo)識，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
要檢測某一變量是否存在，雖然簡單但是也要細(xì)心，下面整理了幾點(diǎn)，遇到類似問題的朋友可以參考下2013-11-11
JavaScript實(shí)現(xiàn)環(huán)繞鼠標(biāo)旋轉(zhuǎn)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)環(huán)繞鼠標(biāo)旋轉(zhuǎn)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要針對一道JS前端閉包面試題進(jìn)行解析，從例題出發(fā)詳細(xì)介紹JS前端閉包相關(guān)知識，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要介紹了淺析JavaScript訪問對象屬性和方法及區(qū)別的相關(guān)資料,需要的朋友可以參考下2015-11-11
js的拼接html，會有一些細(xì)節(jié)是需要注意的，也就是單引號的問題，下面有個(gè)示例，大家感受下2014-07-07
Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播詳解
這篇文章主要為大家介紹了Javascript Bootstrap的網(wǎng)格系統(tǒng),導(dǎo)航欄和輪播，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
純JS實(shí)現(xiàn)根據(jù)CSS的class選擇DOM
這篇文章主要介紹了純JS實(shí)現(xiàn)根據(jù)CSS的class選擇DOM,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了js靜態(tài)檢查工具eslint配置文件的相關(guān)知識，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-11-11
JS操作圖片(增,刪,改) 例子，需要的朋友可以參考一下2013-04-04