本例採用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.2.js"></script>
<script type="text/javascript">
//數據源，json的格式.
var user=[{"id": 1, "name": "raq","age":"25"},
{"id": 2, "name": "tac","age":"35"},
{"id": 3, "name": "王五","age":"20"},
{"id": 4, "name": "老王","age":"20"},
{"id": 5, "name": "老張","age":"25"},
{"id": 6, "name": "mzone","age":"35"},
{"id": 7, "name": "王五","age":"20"},
{"id": 8, "name": "王老吉","age":"20"},
{"id": 9, "name": "abcde","age":"25"},
{"id": 10, "name": "李四","age":"35"},
{"id": 11, "name": "12345","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>