基于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 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
解析javascript瀑布流原理实现图片滚动加载
Mar 10 Javascript
将angular-ui的分页组件封装成指令的方法详解
May 10 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
基于脚手架创建Vue项目实现步骤详解
Aug 03 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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
在IIS7.0下面配置PHP 5.3.2运行环境的方法
2010/04/13 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
用JavaScript对JSON进行模式匹配(Part 1-设计)
2010/07/17 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
python命令行参数sys.argv使用示例
2014/01/28 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python 生成 -1~1 之间的随机数矩阵方法
2018/08/04 Python
Python使用指定端口进行http请求的例子
2019/07/25 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
python算的上脚本语言吗
2020/06/22 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
世界知名接发和假发品牌:Poze Hair
2017/03/08 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
UML设计模式笔试题
2014/06/07 面试题
红领巾广播站广播稿
2014/02/01 职场文书
企业法人授权委托书
2014/09/25 职场文书
关于国庆节的广播稿
2015/08/19 职场文书