基於WEB前端頁面的頁面內容搜索實現教程

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

   表單獲取關鍵字 –> 傳入後端SQL語句處理 –>數據返回給前端顯示

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

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

	$(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了