网站地图
【www.gdgbn.com--jquery】
本案例采用jquery实现动态搜索显示功能，只要输入值就能立刻动态显示数据，不同于常规查询方法。 模拟效果如下： 1、
2、
<%@ page language="java" pageencoding="utf-8"%>struts2
<script type="text/网页特效" 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="编号名称年龄";
//遍历解析json
$.each(user,function(id, item){
//如果包含则为table赋值
if(item.name.indexof(seachtext)!=-1){
tab+=""+item.id+""+item.name+""+item.age+"";
}
})
tab+="";
$("#div").html(tab);
//重新覆盖掉，不然会追加
tab="编号名称年龄";
}else{
$("#div").html("");
}
// }
})
});
</script>
名字：