欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析基于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)化

復(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é)號存入輸出的中
        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)文章

最新評論