淺析基於WEB前端頁面的頁面內容搜尋的實作思路_javascript技巧

在網頁做查詢以前都是這麼做的

   表單取得關鍵字 –> 傳入後端SQL語句處理 –>資料回傳給前端顯示

今天突然到遊覽器的Ctrl F的這個功能怎麼實現的，把數據一次放在頁面上，然後在用JS 去匹配頁面的內容。

不管怎麼樣，現在完成了功能，然後在做最佳化

複製程式碼 程式碼如下:

$ new Array();
     var TurenameArray = new Array();
     var table = $("table>tbody");

🎜>        userid = $(this).children().eq(0).html();
        //將學號存入輸出的中
       //將學號存入輸出  turename = $(this).children().eq(1).html();
        //將姓名存了陣列中
        TurenameArray name);     $("#search").focus(function(){
          $(this).val("");
       }).blur(function(){
         val = $. trim($(this).val());
         if(val === "")
         {       });
    $(".btn").click(function(){
     工號/姓名")
      {
         alert("請輸入有效的工號與姓名");
           table.children().hide( "100");
         if(!isNaN(val))
         {
      }
         else
         {
         );
         }
      }
    });
function hanld(array {
        if(array[i].indexOf(value) !== -1)
        {
           {
                 }
      }
}



程式碼在上面，我下面說一下 設計思路。

取得到要配對的資料組合依序存入數組中，然後在符合。

用JS的子字串定位的函數indexof 如果不匹配就回傳-1，匹配就回傳字串的位置。

這樣就可以完成搜尋。先把所有資料都隱藏，然後配對成功就顯示出來了。這樣就OK了