jQuery autoComplete插件两种使用方式及动态改变参数(3)

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

$.Autocompleter.defaults =

我们在后面添加一段

onBegin: null,

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

function onChange(crap, skipPrevCheck)

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

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

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

function onChange(crap, skipPrevCheck) { //2010-01-27 ,添加onBegin函数,以便在启动onChange的时候,可以重新设置options if (options.onBegin) { var op = options.onBegin(options); if (op) { $.extend(options, op); } } //end if( lastKeyPressCode == KEY.DEL ) { select.hide(); return; } var currentValue = $input.val(); if ( !skipPrevCheck && currentValue == previousValue ) return; previousValue = currentValue; currentValue = lastWord(currentValue); if ( currentValue.length >= options.minChars) { $input.addClass(options.loadingClass); if (!options.matchCase) currentValue = currentValue.toLowerCase(); request(currentValue, receiveData, hideResultsNow); } else { stopLoading(); select.hide(); } };

再来看调用:

/*客户名称自动匹配*/ function customerAutoComplete(){ $("#customerFullName").autocomplete(encodeURI("/approvalajax/salesOrderApproval_findCustomerList"), { /**加自定义表头**/ tableHead: "<div><span>客户编码</span> <span>客户名称</span></div>", minChars: 0, width: 310, multiple: false, mustMatch: false, matchContains: false, matchSubset: false, autoFill: false, onBegin: function(options) { //修改--用于动态改变ledger的值 options.extraParams.ledger= $("#ledger").val(); return options; }, //extraParams: {ledger:$("#ledger").val()}, dataType: 'json', parse: function(data) { var rows = []; if(data == null || data.customerList == null){ return rows; } for(var i=0; i<data.customerList.length; i++){ rows[rows.length] = { data:data.customerList[i], //下拉框显示数据格式 value:data.customerList[i].cusName, //选定后实际数据格式 result:data.customerList[i].cusName //选定后输入框显示数据格式 }; } return rows; }, formatItem: function(row, i, max) { return "<span>" + row.cusCode + "</span> " + "<span>" + row.cusName + "</span>"; }, formatMatch: function(row, i, 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); $("#licensecode").val(data.licensecode); /*根据选择的客户、账套加载 对应产品线、收付款协议、账期*/ setPLAndPCAndCP(data.cusCode); }).bind("unmatch", function(){ clearCustomerInfo(); }); }

其实做的只有三步:

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

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdyyw.html