仿百度动态搜索显示报表

最新推荐文章于 2023-03-28 09:49:54 发布

zsq0511

最新推荐文章于 2023-03-28 09:49:54 发布

阅读量390

点赞数

分类专栏：技巧 JAVA

本文链接：https://blog.csdn.net/zsq0511/article/details/8269541

版权

技巧同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JAVA

5 篇文章 0 订阅

订阅专栏

本例采用jQuery实现动态搜索显示功能，只要输入值就能立刻动态显示数据，如下图：

实现代码如下：

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>struts2</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
    //数据源，json的格式.
    var user=[{"id": 1, "name": "raq","age":"25"},
              {"id": 2, "name": "tac","age":"35"},
              {"id": 3, "name": "王五","age":"20"},
              {"id": 4, "name": "老王","age":"20"},
              {"id": 5, "name": "老张","age":"25"},
              {"id": 6, "name": "mzone","age":"35"},
              {"id": 7, "name": "王五","age":"20"},
              {"id": 8, "name": "王老吉","age":"20"},
              {"id": 9, "name": "abcde","age":"25"},
              {"id": 10, "name": "李四","age":"35"},
              {"id": 11, "name": "12345","age":"20"},
              {"id": 12, "name": "246","age":"20"},
              {"id": 13, "name": "张三丰","age":"25"},
              {"id": 14, "name": "李四牛","age":"35"},
              {"id": 15, "name": "王五户","age":"20"},
              {"id": 16, "name": "老老王","age":"20"},
              {"id": 17, "name": "张三","age":"25"},
              {"id": 18, "name": "李四","age":"35"},
              {"id": 19, "name": "王五","age":"20"},
              {"id": 20, "name": "老王王","age":"20"}];
    $(document).ready(function(){
        var seach=$("#seach");
        seach.keyup(function(event){
            var keyEvent=event || window.event;
            var keyCode=keyEvent.keyCode;
            // 数字键：48-57
            // 字母键：65-90
            // 删除键：8
            // 后删除键：46
            // 退格键：32
            // enter键：13
            if((keyCode>=48&&keyCode<=57)||(keyCode>=65&&keyCode<=90)||keyCode==8||keyCode==13||keyCode==32||keyCode==46){
               //获取当前文本框的值
               var seachText=$("#seach").val();
               if(seachText!=""){
                  //构造显示页面
                  var tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>编号</td><td>名称</td><td>年龄</td></tr>";
                  //遍历解析json
                  $.each(user,function(id, item){
                     //如果包含则为table赋值
                     if(item.name.indexOf(seachText)!=-1){
                        tab+="<tr align='center'><td>"+item.id+"</td><td>"+item.name+"</td><td>"+item.age+"</td></tr>";
                     }
                  })
                  tab+="</table>";
                  $("#div").html(tab);
                  //重新覆盖掉，不然会追加
                  tab="<table width='300' border='1' cellpadding='0' cellspacing='0'><tr align='center'><td>编号</td><td>名称</td><td>年龄</td></tr>";
               }else{
                  $("#div").html("");
               }
           }
        })
    });
    </script>
</head>
<body>
      名字：<input id="seach" />
      <br/><br/>
      <div id="div"></div>
</body>
</html>

zsq0511

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿百度动态搜索显示报表

本例采用jQuery实现动态搜索显示功能，只要输入值就能立刻动态显示数据，如下图：实现代码如下： struts2 /js/jquery-1.4.2.js"> //数据源，json的格式. var user=[{"id": 1, "name": "raq","age":"25"},
复制链接

扫一扫