浅析基于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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
element-ui点击查看大图的方法示例
Dec 14 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
虹吸式咖啡壶操作
2021/03/03 冲泡冲煮
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
2015/09/06 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
js判断主流浏览器类型和版本号的简单实现代码
2016/05/26 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
Python中模块与包有相同名字的处理方法
2017/05/05 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
美国最顶级的精品店之一:Hampden Clothing
2016/12/22 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
中华美德颂演讲稿
2014/05/20 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
实验心得体会
2014/09/05 职场文书
单方离婚协议书范本2014
2014/10/28 职场文书
校友回访母校寄语
2015/02/26 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
为什么MySQL分页用limit会越来越慢
2021/07/25 MySQL