基于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 相关文章推荐
jquery 常用操作整理 基础入门篇
Oct 14 Javascript
Seajs的学习笔记
Mar 04 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
PHP 和 MySQL 基础教程(一)
2006/10/09 PHP
解决中英文字符串长度问题函数
2007/01/16 PHP
php数据序列化测试实例详解
2017/08/12 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
2013/12/14 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
2017/11/28 Javascript
实现一个 Vue 吸顶锚点组件方法
2019/07/10 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python生成随机验证码的两种方法
2015/12/22 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python中关键字global和nonlocal的区别详解
2018/09/03 Python
实例讲解Python3中abs()函数
2019/02/19 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
python json.dumps() json.dump()的区别详解
2020/07/14 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
CAD制图设计师自荐信
2014/01/29 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
幼儿园园长新年寄语2015
2014/12/08 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
2015年路政工作总结
2015/05/22 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
新娘婚礼致辞
2015/07/27 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python