导入
<link rel="stylesheet"
href="${ctx }/static/plugins/jQuery-autoComplete-master/jquery.auto-complete.css"> 样式
<script src="${ctx}/static/assets/js/jquery-2.1.4.min.js"></script>
<script
src="${ctx }/static/plugins/jQuery-autoComplete-master/jquery.auto-complete.js"></script>
----------------------------------------------------------------------------------------------------------------------------------------------------
jsp部分
<div class="widget-toolbar no-border " style="line-height: 77px;float:left">
<input type="text" >查询会员</a>
</div>
--------------------------------------------------------------------------------------------------------------------------------------------------
jquery部分
jQuery(function($) {
$("#searchcustomer")
.each(
function() {
var obj = $(this);
obj
.autoComplete({
minChars : 1,
source : function(term, response) {
try {
xhr.abort();
} catch (e) {
}
xhr = $
.getJSON(
'${ctx }/cashier/ajaxCustomerInfo',
{
query : term
},
function(data) {
response(data);
});
},
renderItem : function(item, search) {
search = search
.replace(
/[-\/\\^$*+?.()|[\]{}]/g,
'\\$&');
var re = new RegExp("("
+ search.split(' ')
.join('|')
+ ")", "gi");
return '<div class="autocomplete-suggestion" data-mobileno="' + item.tel + '" data-).val(item.data('customername'));
}
});
});
})
-------------------------------------------------------------------------------------------------------------------------------------------------
ajax传到后台返回
/**
* ajax查询用户信息（手机号 or 姓名）
* */
@RequestMapping(value = "/ajaxCustomerInfo", method = RequestMethod.GET)
@ResponseBody
public List<Customer> getCustomer(String query, HttpServletRequest request,
Model model) {
Object objshopid = request.getSession().getAttribute("shopid");
Integer shopid = (Integer) objshopid;
List<Customer> customers = customerService.findCustomerByQuery(query,
shopid);
return customers;
}