基于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 相关文章推荐
一段好玩的JavaScript代码
Dec 01 Javascript
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
May 17 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
js图片切换具体实现代码
Oct 13 Javascript
详解Angular的双向数据绑定(MV-VM)
Dec 26 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
node跨域请求方法小结
Aug 25 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
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常用工具类大全附全部代码下载
2015/12/07 PHP
5 cool javascript apps
2007/03/24 Javascript
javascript 日历提醒系统( 兼容所有浏览器 )
2009/04/07 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
2015/12/04 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
JS实现生成由字母与数字组合的随机字符串功能详解
2018/05/25 Javascript
微信小程序点击保存图片到本机功能
2019/12/13 Javascript
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python中正则表达式的使用方法
2018/02/25 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python内打印变量之%和f的实例
2020/02/19 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
DJI全球:DJI Global
2021/03/15 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
2014自荐信的写作技巧
2014/01/28 职场文书
优秀辅导员事迹材料
2014/02/16 职场文书
营销团队口号
2014/06/06 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
2014年班组工作总结
2014/11/20 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
个人原因辞职信模板
2015/05/13 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL