淺析基于WEB前端頁面的頁面內容搜索的實現(xiàn)思路
更新時間:2014年06月10日 10:04:39 作者:
本文主要是想實現(xiàn)瀏覽器的CTRL+F功能,提供個思路和代碼,需要的朋友可以參考下
在網頁做查詢以前都是這么做的
表單獲取關鍵字 –> 傳入后端SQL語句處理 –>數據返回給前端顯示
今天突然到游覽器的Ctrl+F的這個功能怎么實現(xiàn)的,把數據一次放在頁面上,然后在用JS 去匹配頁面的內容。
不管怎么樣,現(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();
//將學號存入輸出的中
UserArray.push(userid);
turename = $(this).children().eq(1).html();
//將姓名存了數組中
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");
}
}
}
代碼在上面,我下面說一下 設計思路。
獲取到要匹配的數據結合按順序存入到數組中,然后在匹配。
用JS的子串定位的函數indexof 如果不匹配就返回-1,匹配就返回字符串的位置。
這樣就可以完成搜索。先把所有數據都隱藏,然后匹配成功就顯示出來了。這樣就OK了
相關文章
JavaScript?Echarts柱狀圖label優(yōu)化中問題針對講解
這篇文章主要介紹了JavaScript?Echarts柱狀圖label優(yōu)化中問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習吧2022-12-12
微信小程序使用map組件實現(xiàn)獲取定位城市天氣或者指定城市天氣數據功能
這篇文章主要介紹了微信小程序使用map組件實現(xiàn)獲取定位城市天氣或者指定城市天氣數據功能,涉及微信小程序map組件結合微信API獲取天氣信息相關操作技巧,需要的朋友可以參考下2019-01-01
js實現(xiàn)七夕表白彈幕效果 jQuery實現(xiàn)彈幕技術
這篇文章主要介紹了js實現(xiàn)七夕表白彈幕效果,jQuery實現(xiàn)彈幕技術,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08

