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

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

 更新時(shí)間：2014年06月10日 10:04:39   作者：  
本文主要是想實(shí)現(xiàn)瀏覽器的CTRL+F功能,提供個(gè)思路和代碼，需要的朋友可以參考下

在網(wǎng)頁(yè)做查詢(xún)以前都是這么做的

   表單獲取關(guān)鍵字 –> 傳入后端SQL語(yǔ)句處理 –>數(shù)據(jù)返回給前端顯示

今天突然到游覽器的Ctrl+F的這個(gè)功能怎么實(shí)現(xiàn)的，把數(shù)據(jù)一次放在頁(yè)面上，然后在用JS 去匹配頁(yè)面的內(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("請(qǐng)輸入有效的工號(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");
        }
      }
}

代碼在上面，我下面說(shuō)一下 設(shè)計(jì)思路。

獲取到要匹配的數(shù)據(jù)結(jié)合按順序存入到數(shù)組中，然后在匹配。

用JS的子串定位的函數(shù)indexof 如果不匹配就返回-1，匹配就返回字符串的位置。

這樣就可以完成搜索。先把所有數(shù)據(jù)都隱藏，然后匹配成功就顯示出來(lái)了。這樣就OK了

相關(guān)文章

最新評(píng)論