基于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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
Oct 19 Javascript
javascript设计模式 接口介绍
Jul 24 Javascript
JS控制阿拉伯数字转为中文大写示例代码
Sep 04 Javascript
js 数值转换为3位逗号分隔的示例代码
Feb 19 Javascript
javascript操作表格排序实例分析
May 06 Javascript
利用JS实现数字增长
Jul 28 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
JavaScript获取键盘按键的键码(参照表)
Jan 10 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 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编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
json原理分析及实例介绍
2012/11/29 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
nodejs入门教程三:调用内部和外部方法示例
2017/04/24 NodeJs
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
Python创建xml文件示例
2017/03/22 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
详解CSS3阴影 box-shadow的使用和技巧总结
2016/12/03 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
Agoda西班牙:全球特价酒店预订
2017/06/03 全球购物
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
职业生涯规划怎么写
2013/12/29 职场文书
初一学生评语大全
2014/04/24 职场文书
大学毕业生推荐信
2014/07/09 职场文书
房屋产权证明书
2014/10/15 职场文书
实习单位意见
2015/06/04 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
Golang并发工具Singleflight
2022/05/06 Golang
vue实现登陆页面开发实践
2022/05/30 Vue.js