<!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"}]
利用ajax实现和后台交互的模糊搜索
原文地址：http://www.cnblogs.com/TigerZhang-home/p/7581329.html