导入
<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” id=”searchcustomer” style=”height: 33px;” placeholder=”输入客户手机号或姓名查询” value=”${searchcustomer }”/>
<a class=”btn btn-sm btn-primary”
href=”javascript:searchcustomer();”>查询会员</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-id=”‘ + item.id + ‘” data-customername=”‘ + item.customername + ‘” data-val=”‘ + search + ‘”>’ //定义例如item.data(‘customername’)，item.data(‘id’)，item.date(‘val’)的规则
+ item.customername
+ ‘ ‘
+ item.tel.replace(re,
“<b>$1</b>”)
+ ‘</div>’;
},
onSelect : function(e, term, item) {
$(“#searchcustomer”).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;
}
