浅析基于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 相关文章推荐
DOM精简教程
Oct 03 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
vue中的适配px2rem示例代码
Nov 19 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 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
详细介绍:Apache+PHP+MySQL配置攻略
2006/09/05 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
JavaScript中判断函数是new还是()调用的区别说明
2011/04/07 Javascript
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
js图片处理示例代码
2014/05/12 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
微信JS接口大全
2016/08/25 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
浅谈webpack-dev-server的配置和使用
2018/05/17 Javascript
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
python 正则式使用心得
2009/05/07 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python简易版停车管理系统
2019/08/12 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
马来西亚奢侈品牌购物商城:Valiram 247
2020/09/29 全球购物
XMLHttpRequest对象在IE和Firefox中创建方式有没有不同
2016/03/23 面试题
社团文化节邀请函
2014/01/10 职场文书
员工安全承诺书
2014/05/22 职场文书
语文教育专业求职信
2014/06/28 职场文书
人事部:年度述职报告范文
2019/07/12 职场文书
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android