微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解

本文实例讲述了jQuery autoComplete插件两种使用方式及动态改变参数值的方法分享给大家供大家参考,具体如下:

一、一次加载、多次使用:

前端JS代码

rush:js;"> /*客户名称自动匹配*/ function customerAutoComplete(){ $.ajax({ type:"GET",url:encodeURI("/approvalajax/salesOrderApproval_findCustomerList"),dataType:"json",success:function(data,textStatus){ if(data != null && data.customerList != null){ $("#customerFullName").autocomplete(data.customerList,{ /**加自定义表头**/ tableHead: "
客户编码 客户名称
",minChars: 0,width: 310,matchContains: "true",autoFill: false,extraParams: {ledger:$("#ledger").val()},formatItem: function(row,i,max) { return "" + row.cusCode + " " + "" + row.cusName + ""; },formatMatch: function(row,max) { return row.cusCode+row.cusName; },formatResult: function(row) { return row.cusName; } }).result(function(e,data,value,sec){/**加选中后的回调函数**/ clearCustomerInfo(); $("#customerShortName").val(data.cusAbbName); $("#customerFullName").val(data.cusName); $("#customerCode").val(data.cusCode); /*根据选择的客户、账套加载 对应产品线、收付款协议、账期*/ setPLAndPCAndCP(data.cusCode); /*加载存货编码*/ setInventoryAutoComplete(data.cusCode); }).bind("unmatch",function(){ clearCustomerInfo(); }); } } }); }

后台JAVA代码

rush:java;"> /** * 异步请求结果. */ private Map ajaxResultMap; /** * @Description 根据账套异步加载客户列表 * @throws Exception * @return String */ public String findCustomerList() throws Exception { ajaxResultMap = new HashMap(); response.setContentType("text/html;charset=UTF-8"); response.setCharacterEncoding("UTF-8"); List list = erpDataService.findCustomerList(ledger); ajaxResultMap.put("customerList",list); return SUCCESS; }

配置文件相关代码

rush:xml;"> oval-ajax" extends="json-default" namespace="/approvalajax">

二、根据输入内容动态加载:

前端JS代码:

客户编码 客户名称
",dataType: 'json',parse: function(data) { var rows = []; if(data == null || data.customerList == null){ return rows; } for(var i=0; i" + row.cusCode + " " + "" + row.cusName + ""; },max) { return row.cusCode+row.cusName; },formatResult: function(row) { return row.cusName; } }).result(function(e,sec){/**加选中后的回调函数**/ clearCustomerInfo(); $("#customerShortName").val(data.cusAbbName); $("#customerFullName").val(data.cusName); $("#customerCode").val(data.cusCode); $("#licensecode").val(data.licensecode); /*根据选择的客户、账套加载 对应产品线、收付款协议、账期*/ setPLAndPCAndCP(data.cusCode); /*存货编码*/ addInventoryAutoComplete($("#detailListTbody").find("input[tdTag=inventoryCode]")); }).bind("unmatch",function(){ clearCustomerInfo(); }); }

后台JAVA代码:

(); response.setContentType("text/html;charset=UTF-8"); response.setCharacterEncoding("UTF-8"); List list = erpDataService.findTop5CustomerList(ledger,q); ajaxResultMap.put("customerList",list); return SUCCESS; }

说明:在使用动态加载时,请求的URL中插件会自动追加q参数,用于传输输入的参数。

注:使用Jquery中的autoComplete插件实现自动匹配功能时,直接使用它来解析json对象时,会出现一个错误提示,因为它默认使用"/n"拆分行、"|"拆分字段。如果需要使用它来解析json对象,则需要自己实现其parse方法。

参数说明:

注:

另一种方式可动态改变参数传入值。

我们知道这个插件有一个extraParams的参数,因为jquery.autoComplete只支持q和limit两个参数,假如有这样的情况,我们需要向服务器提交更多参数怎么办呢,幸好,作者为我们提供一个扩展参数,就是extraParams。extraParams好是好,可是不幸的是,它是一个死的参数,有时候,我们需要提交一个活的参数到服务器。举例说明,比如说我们有一个公司名称的自动完成功能,但我们同时需要向服务器提供一个城市的参数,正常的情况下没有问题。但当城市的名称是由用户选择的时候,就有问题了,也就说,这个城市的名称是根据用户选择而实时变化的,这个时候,现有的jquery.autoComplete就无能为力了。

这个时候我们就要考虑修改修改一下jquery.autoComplete了,我们先看一下代码,代码有一个onChange事件,这是一个解发事件,我们可以在这里添加一个回调函数来解决问题。首先我们要为options中添加一个参数叫onBegin,大致就在400行左右吧,有一行这样的代码:

我们在后面添加一段

然后我们找到onChange事件,约在226行,代码如下:

在函数时里面添加如下代码:

if (options.onBegin) { var op = options.onBegin(options); if (op) { $.extend(options,op); } }

这段代码被修改过后看起来就像这样:

= options.minChars) { $input.addClass(options.loadingClass); if (!options.matchCase) currentValue = currentValue.toLowerCase(); request(currentValue,receiveData,hideResultsNow); } else { stopLoading(); select.hide(); } };

再来看调用:

其实做的只有三步:

1. 在options中添加一个onBegin的参数 2. 在onChange中判断onBegin是否有赋值,如果有,则调用这个函数,返回将返回值合并到options中去 3. 调用的时候,在onBegin函数中添加一些业务逻辑,并可以重新设置options

就这样,我们不仅可以达到动态去添加extraParams参数,而且还可以动态地修改其它options参数,这个onBegin在用户改变输入框的值就会触发。

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》、《》、《》及《

希望本文所述对大家jQuery程序设计有所帮助。

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

相关推荐