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

 更新时间:2014年06月10日 10:04:39   作者:  
本文主要是想实现浏览器的CTRL+F功能,提供个思路和代码,需要的朋友可以参考下

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

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

相关文章

  • 基于JS2Image实现圣诞树代码

    基于JS2Image实现圣诞树代码

    马上圣诞节了,作为一名程序猿,如何体现自己独特的过节风格,如何在朋友圈发一张专属自己的祝福照片我觉得很有必要,你们说是不是
    2015-12-12
  • H5实现中奖记录逐行滚动切换效果

    H5实现中奖记录逐行滚动切换效果

    这篇文章主要为大家详细介绍了H5实现中奖记录逐行滚动切换效果,利用定时器实现中奖记录逐行展示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • for of 和 for in 的区别介绍

    for of 和 for in 的区别介绍

    这篇文章主要介绍了for of 和 for in 的区别,for of 和 for in都是用来遍历的属性,本文重点介绍下for of 和 for in 的区别,需要的朋友可以参考下
    2022-12-12
  • JS面试必备之如何实现一个精确的倒计时

    JS面试必备之如何实现一个精确的倒计时

    又到了金三银四的季节了,面试的各位同学要开始准备起来了,今天主要分享一个在面试中经常被提到的一个面试题:倒计时,希望对大家有所帮助
    2024-03-03
  • JavaScript Echarts柱状图label优化中问题针对讲解

    JavaScript Echarts柱状图label优化中问题针对讲解

    这篇文章主要介绍了JavaScript Echarts柱状图label优化中问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • Js获取事件对象代码

    Js获取事件对象代码

    js下比较实用的事件绑定代码,学习js 的朋友一定要学习的,为你的页面增加更好的交互。
    2010-08-08
  • 微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

    微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能

    这篇文章主要介绍了微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能,涉及微信小程序map组件结合微信API获取天气信息相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • Axios请求超时设置无效的问题及解决方案

    Axios请求超时设置无效的问题及解决方案

    在现代前端开发中,Axios 是一个广泛使用的 HTTP 客户端库,用于向服务器发送请求并处理响应,然而,有时开发者可能会发现 Axios 的超时设置似乎无效,本文将深入探讨 Axios 请求超时设置无效的常见原因,并提供详细的解决方案和最佳实践,需要的朋友可以参考下
    2024-12-12
  • JavaScript 跳出iframe框架示例详解

    JavaScript 跳出iframe框架示例详解

    这篇文章主要为大家介绍了JavaScript跳出iframe框架示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-11-11
  • js实现七夕表白弹幕效果 jQuery实现弹幕技术

    js实现七夕表白弹幕效果 jQuery实现弹幕技术

    这篇文章主要介绍了js实现七夕表白弹幕效果,jQuery实现弹幕技术,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08

最新评论