淺析基于WEB前端頁面的頁面內(nèi)容搜索的實現(xiàn)思路
在網(wǎng)頁做查詢以前都是這么做的
表單獲取關(guān)鍵字 –> 傳入后端SQL語句處理 –>數(shù)據(jù)返回給前端顯示
今天突然到游覽器的Ctrl+F的這個功能怎么實現(xiàn)的,把數(shù)據(jù)一次放在頁面上,然后在用JS 去匹配頁面的內(nèi)容。
不管怎么樣,現(xiàn)在完成了功能,然后在做優(yōu)化
$(function(){
var UserArray = new Array();
var TurenameArray = new Array();
var table = $("table>tbody");
table.children().each(function(){
userid = $(this).children().eq(0).html();
//將學(xué)號存入輸出的中
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("工號/姓名");
}
});
$(".btn").click(function(){
val = $("#search").val();
if(val === "工號/姓名")
{
alert("請輸入有效的工號和姓名");
}
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è)計思路。
獲取到要匹配的數(shù)據(jù)結(jié)合按順序存入到數(shù)組中,然后在匹配。
用JS的子串定位的函數(shù)indexof 如果不匹配就返回-1,匹配就返回字符串的位置。
這樣就可以完成搜索。先把所有數(shù)據(jù)都隱藏,然后匹配成功就顯示出來了。這樣就OK了
相關(guān)文章
javascript中負(fù)數(shù)算術(shù)右移、邏輯右移的奧秘探索
javascript中負(fù)數(shù)的算術(shù)右移和邏輯右移都十分的讓人迷惑,特別是邏輯右移,接下來的文章中將為大家詳細(xì)介紹下為什么右移之后,一個很小的負(fù)數(shù)也會得到一個無比巨大的數(shù)2013-10-10ymPrompt的doHandler方法來實現(xiàn)獲取子窗口返回值的方法
今天在寫頁面時用到了ymPrompt的win方法來彈出一個窗口。由于要用到獲取子窗口返回來的值判斷是否刷新父窗口,在ymPrompt的組件Demo中一直沒有找到合適的方法實現(xiàn)2010-06-06JS 根據(jù)子網(wǎng)掩碼,網(wǎng)關(guān)計算出所有IP地址范圍示例
這篇文章主要介紹了JS 根據(jù)子網(wǎng)掩碼,網(wǎng)關(guān)計算出所有IP地址范圍,涉及IP地址、子網(wǎng)的正則驗證,子網(wǎng)掩碼計算等相關(guān)操作技巧,需要的朋友可以參考下2016-09-09JavaScript實現(xiàn)棧結(jié)構(gòu)Stack過程詳解
這篇文章主要介紹了JavaScript實現(xiàn)棧結(jié)構(gòu)Stack過程詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-03-03