基于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 (十一) 实战表单验证与自动完成提示插件
Feb 23 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
vue实现动态数据绑定
Apr 28 Javascript
vue2 设置router-view默认路径的实例
Sep 20 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
vue+moment实现倒计时效果
Aug 26 Javascript
实现一个简单得数据响应系统
Nov 11 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
根德YB400的电路分析
2021/03/02 无线电
PHP+DBM的同学录程序(2)
2006/10/09 PHP
PHP Document 代码注释规范
2009/04/13 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
详解PHP swoole process的使用方法
2017/08/26 PHP
Laravel 默认邮箱登录改成用户名登录的实现方法
2019/08/12 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
List Installed Software Features
2007/06/11 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
2017/04/20 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
javascript之分片上传,断点续传的实际项目实现详解
2019/09/05 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
Python实现的石头剪子布代码分享
2014/08/22 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
python实现图片中文字分割效果
2019/07/22 Python
详解基于python的多张不同宽高图片拼接成大图
2019/09/26 Python
Python如何访问字符串中的值
2020/02/09 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
高中毕业生生活的自我评价
2013/12/08 职场文书
Django migrate报错的解决方案
2021/05/20 Python
Pytorch中的数据集划分&正则化方法
2021/05/27 Python