jquery插件autoComplete自动弹出

jquery插件autoComplete自动弹出

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

导入

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/108775.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • php curl用法_php项目实战

    php curl用法_php项目实战例1,curl扩展开启的步骤:1、将PHP文件夹下的三个文件php_curl.dll,libeay32.dll,ssleay32.dll复制到system32下;2、将php.ini(c:WINDOWS目录下)中的;extension=php_curl.dll中的分号去掉;3、重启apache或者IIS。例2,PHP开启curl_init在测试模拟登录时,出现“Calltoundefined…

  • c++实现远程开关机「建议收藏」

    c++实现远程开关机「建议收藏」把远程开、关机写成了一个类的两个静态函数。这两个功能的实现都需要事先对目标主机进行一些设置。其中远程开机需要目标主机主板支持,并且插上网线。部分主机的设置已经写明。另可实现方法:https://www.cnblogs.com/findumars/p/6009474.html原理参考:https://blog.csdn.net/smstong/article/details/16879347…

  • hybrid app开发教程_公司员工大会历程分享

    hybrid app开发教程_公司员工大会历程分享关于这个话题,本文并不准备详述移动开发相关的一些通用技术,例如:viewport、rem、flexbox、媒体查询等。这里主要讲述我们的hybrid产品策略、开发流程与规范、性能优化以及我们踩过的坑。而往往就是这些,网上相关的资料相对比较匮乏的,又缺少类似经验文章,所以希望通过此篇文章,跟大家分享一些魅族团队关于hybrid产品开发的经验。产品背景我们希望这一类产品具备比较强大的

  • 模电知识点汇总

    模电知识点汇总根据北航921大纲整理的一些模电知识点:##一:半导体基础###1.定义本征半导体是完全纯净的,没有杂质的半导体。本征半导体有两种载流子,即电子和空穴。但是本征半导体的导电能力较弱并且容易受到温度的影响。在本征半导体中插入高价元素,形成n型半导体。他的多数载流子为电子,少子为空穴。###2.PN结将p型半导体与n型半导体制作在同一片硅片上,它们的交界处形成PN结。多子由于浓度差进行扩散运…

  • CGI,FAST-CGI,PHP-FPM的区别

    CGI,FAST-CGI,PHP-FPM的区别

  • python 随机函数的具体各种使用

    python 随机函数的具体各种使用

    2021年11月10日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号