基于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了

发表评论

电子邮件地址不会被公开。 必填项已用*标注

(Spamcheck Enabled)