基于jQuery实现动态搜索显示功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了基于jQuery实现动态搜索显示功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2488字，纯文字阅读大概需要4分钟。
内容图文
本文实例使用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>
以上就是本文的全部内容，希望对大家的学习有所帮助。
内容总结
以上是互联网集市为您收集整理的基于jQuery实现动态搜索显示功能全部内容，希望文章能够帮你解决基于jQuery实现动态搜索显示功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】