浅析基于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中的值类型转换介绍
Dec 31 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
jquery replace方法去空格
May 08 jQuery
Javacript中自定义的map.js  的方法
Nov 26 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
May 30 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
vue 中固定导航栏的实例代码
Nov 01 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/02 无线电
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
vue中监听返回键问题
2019/08/28 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
解决layui页面按钮点击无反应,也不报错的问题
2019/09/29 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
使用node-media-server搭建一个简易的流媒体服务器
2021/01/20 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
如何用Python来搭建一个简单的推荐系统
2019/08/07 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python从列表推导到zip()函数的5种技巧总结
2019/10/23 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
Python中的__init__作用是什么
2020/06/09 Python
Python 内存管理机制全面分析
2021/01/16 Python
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
合法的离婚协议书范本
2014/10/23 职场文书
考试作弊检讨书怎么写?
2014/12/21 职场文书
工程部岗位职责
2015/02/10 职场文书
开学季:喜迎新生,迎新标语少不了
2019/11/07 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
JavaScript严格模式不支持八进制的问题讲解
2021/11/07 Javascript
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技