浅析基于WEB前端页面的页面内容搜索的实现思路


Posted in Javascript onJune 10, 2014

在网页做查询以前都是这么做的

   表单获取关键字 ?> 传入后端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了

Javascript 相关文章推荐
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
Nov 17 Javascript
解决checkbox的attr(checked)一直为undefined问题
Jun 16 Javascript
js生成的验证码的实现与技术分析
Sep 17 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
JS实现json数组排序操作实例分析
Oct 28 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 #Javascript
iframe里的页面禁止右键事件的方法
Jun 10 #Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 #Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 #Javascript
js换图片效果可进行定时操作
Jun 09 #Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 #Javascript
javascript 处理null及null值示例
Jun 09 #Javascript
You might like
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
一个简易需要注册的留言版程序
2006/10/09 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
CodeIgniter使用phpcms模板引擎
2013/11/12 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
php技巧小结【推荐】
2017/01/19 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
php框架知识点的整理和补充
2021/03/01 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
Bootstrap Table使用整理(二)
2017/06/09 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
nodejs实现的http、https 请求封装操作示例
2020/02/06 NodeJs
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
历史专业毕业生的自我鉴定
2013/11/15 职场文书
大学生职业生涯规划范文
2014/01/22 职场文书
安全生产投入制度
2014/01/29 职场文书
小小商店教学反思
2014/04/27 职场文书
历史学专业求职信
2014/06/19 职场文书
先进典型发言材料
2014/12/30 职场文书
餐饮服务食品安全承诺书
2015/04/29 职场文书
2019新员工心得体会
2019/06/25 职场文书
导游词之凤凰古城
2019/10/22 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL
golang定时器
2022/04/14 Golang
Android中的Launch Mode详情
2022/06/05 Java/Android