淺析基于WEB前端頁面的頁面內(nèi)容搜索的實現(xiàn)思路

更新時間：2014年06月10日 10:04:39 作者：

本文主要是想實現(xiàn)瀏覽器的CTRL+F功能,提供個思路和代碼，需要的朋友可以參考下

在網(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&gt;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&lt;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)文章

基于JS2Image實現(xiàn)圣誕樹代碼
馬上圣誕節(jié)了，作為一名程序猿，如何體現(xiàn)自己獨特的過節(jié)風(fēng)格，如何在朋友圈發(fā)一張專屬自己的祝福照片我覺得很有必要，你們說是不是
2015-12-12
H5實現(xiàn)中獎記錄逐行滾動切換效果
這篇文章主要為大家詳細(xì)介紹了H5實現(xiàn)中獎記錄逐行滾動切換效果，利用定時器實現(xiàn)中獎記錄逐行展示，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
for?of?和?for?in?的區(qū)別介紹
這篇文章主要介紹了for?of?和?for?in?的區(qū)別,for?of?和?for?in都是用來遍歷的屬性，本文重點介紹下for?of?和?for?in?的區(qū)別，需要的朋友可以參考下
2022-12-12
JS面試必備之如何實現(xiàn)一個精確的倒計時
又到了金三銀四的季節(jié)了,面試的各位同學(xué)要開始準(zhǔn)備起來了,今天主要分享一個在面試中經(jīng)常被提到的一個面試題：倒計時,希望對大家有所幫助
2024-03-03
JavaScript?Echarts柱狀圖label優(yōu)化中問題針對講解
這篇文章主要介紹了JavaScript?Echarts柱狀圖label優(yōu)化中問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
2022-12-12
Js獲取事件對象代碼
js下比較實用的事件綁定代碼，學(xué)習(xí)js 的朋友一定要學(xué)習(xí)的，為你的頁面增加更好的交互。
2010-08-08
微信小程序使用map組件實現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能
這篇文章主要介紹了微信小程序使用map組件實現(xiàn)獲取定位城市天氣或者指定城市天氣數(shù)據(jù)功能,涉及微信小程序map組件結(jié)合微信API獲取天氣信息相關(guān)操作技巧,需要的朋友可以參考下
2019-01-01
Axios請求超時設(shè)置無效的問題及解決方案
在現(xiàn)代前端開發(fā)中,Axios 是一個廣泛使用的 HTTP 客戶端庫,用于向服務(wù)器發(fā)送請求并處理響應(yīng),然而,有時開發(fā)者可能會發(fā)現(xiàn) Axios 的超時設(shè)置似乎無效,本文將深入探討 Axios 請求超時設(shè)置無效的常見原因,并提供詳細(xì)的解決方案和最佳實踐,需要的朋友可以參考下
2024-12-12
JavaScript?跳出iframe框架示例詳解
這篇文章主要為大家介紹了JavaScript跳出iframe框架示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-11-11
js實現(xiàn)七夕表白彈幕效果 jQuery實現(xiàn)彈幕技術(shù)
這篇文章主要介紹了js實現(xiàn)七夕表白彈幕效果，jQuery實現(xiàn)彈幕技術(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08