浅析基于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 相关文章推荐
比较简单的异步加载JS文件的代码
Jul 18 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
详解node中创建服务进程
May 09 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
VUE 自定义组件模板的方法详解
Aug 30 Javascript
js实现星星打分效果
Jul 05 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
使用Cargo工具高效创建Rust项目
Aug 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
记录mysql性能查询过程的使用方法
2013/05/02 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
广告显示判断
2006/08/31 Javascript
javaScript对象和属性的创建方法
2007/01/15 Javascript
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
易操作的jQuery表单提示插件
2015/12/01 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
Windows下安装 node 的版本控制工具 nvm
2020/02/06 Javascript
react使用antd表单赋值,用于修改弹框的操作
2020/10/29 Javascript
Python中的闭包详细介绍和实例
2014/11/21 Python
Python常用的日期时间处理方法示例
2015/02/08 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
用Django写天气预报查询网站
2018/10/21 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
使用Pycharm分段执行代码
2020/04/15 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
党支部创先争优活动总结
2014/08/28 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
springboot @ConfigurationProperties和@PropertySource的区别
2021/06/11 Java/Android