基于jQuery实现动态搜索显示功能
2016-05-05 14:53
936 查看
本文实例使用jQuery实现动态搜索显示功能,只要输入值就能立刻动态显示数据,不同于常规查询方法,供大家参考,具体内容如下
模拟效果如下:
情况1:
情况2:
实现代码:
<%@ 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>
以上就是本文的全部内容,希望对大家的学习有所帮助。
您可能感兴趣的文章:
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- 搜狗百度360市值齐跌:搜索引擎们陷入集体焦虑?
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- 本人即将筹备败家日志,敬请期待!
- JavaScript 各种遍历方式详解
- 数组方法汇总
- IE:使用搜索助手
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- Jquery实现的table最后一行添加样式的代码