基于jQuery实现动态搜索显示功能


Posted in Javascript onMay 05, 2016

本文实例使用jQuery实现动态搜索显示功能,只要输入值就能立刻动态显示数据,不同于常规查询方法,供大家参考,具体内容如下

模拟效果如下:

情况1:

基于jQuery实现动态搜索显示功能

情况2:

                  基于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.1.js"></script>
 <script type="text/javascript">
 //数据源,json的格式.
 var user=[{"id": 1, "name": "张三","age":"25"},
    {"id": 2, "name": "李四","age":"35"},
    {"id": 3, "name": "王五","age":"20"},
    {"id": 4, "name": "老王","age":"20"},
    {"id": 5, "name": "老张","age":"25"},
    {"id": 6, "name": "李四","age":"35"},
    {"id": 7, "name": "王五","age":"20"},
    {"id": 8, "name": "老王","age":"20"},
    {"id": 9, "name": "abc","age":"25"},
    {"id": 10, "name": "李b四","age":"35"},
    {"id": 11, "name": "125","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>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
Apr 19 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
实例讲解避免javascript冲突的方法
Jan 03 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
vue使用Google地图的实现示例代码
Dec 19 Javascript
原生js实现密码强度验证功能
Mar 18 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 #Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
May 05 #Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 #Javascript
javascript执行环境及作用域详解
May 05 #Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 #Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 #Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 #Javascript
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
Javascript 事件流和事件绑定
2009/07/16 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
JavaScript中for..in循环陷阱介绍
2013/11/12 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
原生js实现节日时间倒计时功能
2017/01/18 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
使用vue构建移动应用实战代码
2017/08/02 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
2017/09/29 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
Vue实现input宽度随文字长度自适应操作
2020/07/29 Javascript
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
.net C#面试题
2012/08/28 面试题
运动会口号大全
2014/06/07 职场文书
会计学专业求职信
2014/07/17 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
数学教师个人工作总结
2015/02/06 职场文书
如何在向量化NumPy数组上进行移动窗口
2021/05/18 Python
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
2022/05/30 HTML / CSS
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL