jquery插件autoComplete自动弹出

全栈程序员-站长 • 2022年2月22日下午5:00 • 未分类 • 阅读 41

大家好，又见面了，我是全栈君。

导入

—————————————————————————————————————————————————-

jsp部分

————————————————————————————————————————————————–

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;
}

转载于:https://www.cnblogs.com/1234cjq/p/6070036.html

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/108775.html原文链接：https://javaforall.net