<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/jquery-ui-1.10.4.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
thead th{width: 100px;text-align: center;}
</style>
</head>
<body>
<label>姓名：</label><input type="text" id="username" />
<label>備注：</label><input type="text" id="content" />
<input type="button" id="send" value="點擊" />
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>備注</th>
</tr>
</thead>
<tbody id="tb">
</tbody>
</table>
</body>
<script type="text/javascript">
$(function() {
$('#username').keyup(function() {
var n=$(this).val();
if(n!=''){
$.ajax({
type: "GET",
url: "../data/text.json",
data:{n:n},
dataType: "json",
success: function(data) {
$("#tb").empty();
var str = "";
$.each(data,function(commendIndex,comment){
if(comment['username'].indexOf(n)>=0){
str +='<tr><th>'+comment['ID']+'</th><th>'+comment['username']+'</th><th>'+comment['content']+'</th></tr>';
}
});
$("#tb").append(str);
}
});
}else{
$("#tb").empty()
}
});
});
</script>
</html>
[{
"ID":"1",
"username":"張三",
"content":"11111"
},{
"ID":"2",
"username":"李四",
"content":"22222"
},{
"ID":"3",
"username":"王五",
"content":"33333"
},{
"ID":"4",
"username":"王六",
"content":"44444"
},{
"ID":"5",
"username":"趙四",
"content":"55555"
},{
"ID":"6",
"username":"趙四四",
"content":"66666"
}
]
