淺析基于WEB前端頁面的頁面內(nèi)容搜索的實(shí)現(xiàn)思路
更新時(shí)間：2014年06月10日 10:04:39 作者：
本文主要是想實(shí)現(xiàn)瀏覽器的CTRL+F功能,提供個(gè)思路和代碼，需要的朋友可以參考下
在網(wǎng)頁做查詢以前都是這么做的
表單獲取關(guān)鍵字 –> 傳入后端SQL語句處理 –>數(shù)據(jù)返回給前端顯示
今天突然到游覽器的Ctrl+F的這個(gè)功能怎么實(shí)現(xiàn)的，把數(shù)據(jù)一次放在頁面上，然后在用JS 去匹配頁面的內(nèi)容。
不管怎么樣，現(xiàn)在完成了功能，然后在做優(yōu)化
復(fù)制代碼 代碼如下:
$(function(){
var UserArray = new Array();
var TurenameArray = new Array();
var table = $("table>tbody");
table.children().each(function(){
userid = $(this).children().eq(0).html();
//將學(xué)號(hào)存入輸出的中
UserArray.push(userid);
turename = $(this).children().eq(1).html();
//將姓名存了數(shù)組中
TurenameArray.push(turename);
});
//
$("#search").focus(function(){
$(this).val("");
}).blur(function(){
val = $.trim($(this).val());
if(val === "")
{
$(this).val("工號(hào)/姓名");
}
});
$(".btn").click(function(){
val = $("#search").val();
if(val === "工號(hào)/姓名")
{
alert("請輸入有效的工號(hào)和姓名");
}
else
{
table.children().hide("100");
if(!isNaN(val))
{
hanld(UserArray,val);
}
else
{
hanld(TurenameArray,val);
}
}
});
function hanld(array,value)
{
for(i=0;i<array.length;i++)
{
if(array[i].indexOf(value) !== -1)
{
table.children().eq(i).show("1000");
}
}
}
代碼在上面，我下面說一下 設(shè)計(jì)思路。
獲取到要匹配的數(shù)據(jù)結(jié)合按順序存入到數(shù)組中，然后在匹配。
用JS的子串定位的函數(shù)indexof 如果不匹配就返回-1，匹配就返回字符串的位置。
這樣就可以完成搜索。先把所有數(shù)據(jù)都隱藏，然后匹配成功就顯示出來了。這樣就OK了
相關(guān)文章
馬上圣誕節(jié)了，作為一名程序猿，如何體現(xiàn)自己獨(dú)特的過節(jié)風(fēng)格，如何在朋友圈發(fā)一張專屬自己的祝福照片我覺得很有必要，你們說是不是2015-12-12
H5實(shí)現(xiàn)中獎(jiǎng)記錄逐行滾動(dòng)切換效果
這篇文章主要為大家詳細(xì)介紹了H5實(shí)現(xiàn)中獎(jiǎng)記錄逐行滾動(dòng)切換效果，利用定時(shí)器實(shí)現(xiàn)中獎(jiǎng)記錄逐行展示，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了for?of?和?for?in?的區(qū)別,for?of?和?for?in都是用來遍歷的屬性，本文重點(diǎn)介紹下for?of?和?for?in?的區(qū)別，需要的朋友可以參考下2022-12-12
JS面試必備之如何實(shí)現(xiàn)一個(gè)精確的倒計(jì)時(shí)
又到了金三銀四的季節(jié)了,面試的各位同學(xué)要開始準(zhǔn)備起來了,今天主要分享一個(gè)在面試中經(jīng)常被提到的一個(gè)面試題：倒計(jì)時(shí),希望對大家有所幫助2024-03-03
JavaScript?Echarts柱狀圖label優(yōu)化中問題針對講解
這篇文章主要介紹了JavaScript?Echarts柱狀圖label優(yōu)化中問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-12-12
js下比較實(shí)用的事件綁定代碼，學(xué)習(xí)js 的朋友一定要學(xué)習(xí)的，為你的頁面增加更好的交互。2010-08-08
微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能
這篇文章主要介紹了微信小程序使用map組件實(shí)現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能,涉及微信小程序map組件結(jié)合微信API獲取天氣信息相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
Axios請求超時(shí)設(shè)置無效的問題及解決方案
在現(xiàn)代前端開發(fā)中,Axios 是一個(gè)廣泛使用的 HTTP 客戶端庫,用于向服務(wù)器發(fā)送請求并處理響應(yīng),然而,有時(shí)開發(fā)者可能會(huì)發(fā)現(xiàn) Axios 的超時(shí)設(shè)置似乎無效,本文將深入探討 Axios 請求超時(shí)設(shè)置無效的常見原因,并提供詳細(xì)的解決方案和最佳實(shí)踐,需要的朋友可以參考下2024-12-12
這篇文章主要為大家介紹了JavaScript跳出iframe框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-11-11
js實(shí)現(xiàn)七夕表白彈幕效果 jQuery實(shí)現(xiàn)彈幕技術(shù)
這篇文章主要介紹了js實(shí)現(xiàn)七夕表白彈幕效果，jQuery實(shí)現(xiàn)彈幕技術(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08