jquery.autocomplete 插件使用心得

近期使用 jquery.autocomplete 插件 完成仿Google自动完成功能

JSP代码：

<script type="text/javascript" src="${ctx}/js_plugins/jquery/js/jquery.autocomplete.min.js"></script>

<link rel="Stylesheet" href="${ctx}/js_plugins/jquery/js/jquery.autocomplete.css"/>

页面加载时获取到所需数据, 并且初始化

$(function(){

$.ajax({
type:"post",
url:"${ctx}/ttesBillController.do?method=getAllCusomer",
success:function(data,status){
if(status="success"){
$("#cusomerSearch").autocomplete(data,{
minChars:0,
mustMatch:true,
matchContains:true,
scrollHeight: 300
});
}
}
});

});

选中后触发事件 ， 填充对象

$("#cusomerSearch").result(function(event,item){

$.ajax({

type:"post",

url:"${ctx}/ttesBillController.do?method=getCusomer",

data:"cusomerid="+item,

success:function(data,status){

if(status=="success"){

for(var p in data)

$("input[name="+p+"]").val(data[p]);

}

}

});

});

Java代码:

/**
* 获取客户信息数组
* */
public ModelAndView getAllCusomer(HttpServletRequest request,HttpServletResponse response){
List<TbankCustomer> tbankList =tbankCustomerService.getAllTbankCustomer();
List tbankArray = new ArrayList();
for (TbankCustomer tbank : tbankList) {
String tbankInfo = tbank.getCustomerName() +","+  tbank.getCardno();
tbankArray.add(tbankInfo);
}
renderJson(response, JsonUtil.toString(tbankArray));
return null;
}