jQuery autoComplete插件兩種使用方式及動(dòng)態(tài)改變參數(shù)值的方法詳解
本文實(shí)例講述了jQuery autoComplete插件兩種使用方式及動(dòng)態(tài)改變參數(shù)值的方法。分享給大家供大家參考，具體如下：
一、一次加載、多次使用：
前端JS代碼：
/*客戶名稱自動(dòng)匹配*/
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: "<div><span style='width:40%' class='col-1'>客戶編碼</span> <span style='width:58%' class='col-2'>客戶名稱</span></div>",
minChars: 0,
width: 310,
matchContains: "true",
autoFill: false,
extraParams: {ledger:$("#ledger").val()},
formatItem: function(row, i, max) {
return "<span style='width:40%' class='col-1'>" + row.cusCode + "</span> " + "<span style='width:58%' class='col-2'>" + 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){/**加選中后的回調(diào)函數(shù)**/
clearCustomerInfo();
$("#customerShortName").val(data.cusAbbName);
$("#customerFullName").val(data.cusName);
$("#customerCode").val(data.cusCode);
/*根據(jù)選擇的客戶、賬套加載 對(duì)應(yīng)產(chǎn)品線、收付款協(xié)議、賬期*/
setPLAndPCAndCP(data.cusCode);
/*加載存貨編碼*/
setInventoryAutoComplete(data.cusCode);
}).bind("unmatch", function(){
clearCustomerInfo();
});
}
}
});
}
后臺(tái)JAVA代碼：
/**
* 異步請(qǐng)求結(jié)果.
*/
private Map<String, Object> ajaxResultMap;
/**
* @Description 根據(jù)賬套異步加載客戶列表
* @throws Exception
* @return String
*/
public String findCustomerList() throws Exception {
ajaxResultMap = new HashMap<String, Object>();
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
List<ErpCustomer> list = erpDataService.findCustomerList(ledger);
ajaxResultMap.put("customerList", list);
return SUCCESS;
}
配置文件相關(guān)代碼：
<package name="approval-ajax" extends="json-default" namespace="/approvalajax">
<!-- 銷(xiāo)售訂單 審批相關(guān) -->
<action name="salesOrderApproval_*" method="{1}" class="xx.xxx.xxAction">
<result type="json">
<param name="root">ajaxResultMap</param>
<param name="contentType">text/html</param>
</result>
</action>
</package>
二、根據(jù)輸入內(nèi)容動(dòng)態(tài)加載：
前端JS代碼：
/*客戶名稱自動(dòng)匹配*/
function customerAutoComplete(){
$("#customerFullName").autocomplete(encodeURI("/approvalajax/salesOrderApproval_findCustomerList"), {
/**加自定義表頭**/
tableHead: "<div><span style='width:40%' class='col-1'>客戶編碼</span> <span style='width:58%' class='col-2'>客戶名稱</span></div>",
minChars: 0,
width: 310,
matchContains: "true",
autoFill: false,
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], //下拉框顯示數(shù)據(jù)格式
value:data.customerList[i].cusName, //選定后實(shí)際數(shù)據(jù)格式
result:data.customerList[i].cusName //選定后輸入框顯示數(shù)據(jù)格式
};
}
return rows;
},
formatItem: function(row, i, max) {
return "<span style='width:40%' class='col-1'>" + row.cusCode + "</span> " + "<span style='width:58%' class='col-2'>" + 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){/**加選中后的回調(diào)函數(shù)**/
clearCustomerInfo();
$("#customerShortName").val(data.cusAbbName);
$("#customerFullName").val(data.cusName);
$("#customerCode").val(data.cusCode);
$("#licensecode").val(data.licensecode);
/*根據(jù)選擇的客戶、賬套加載 對(duì)應(yīng)產(chǎn)品線、收付款協(xié)議、賬期*/
setPLAndPCAndCP(data.cusCode);
/*存貨編碼*/
addInventoryAutoComplete($("#detailListTbody").find("input[tdTag=inventoryCode]"));
}).bind("unmatch", function(){
clearCustomerInfo();
});
}
后臺(tái)JAVA代碼：
/**
* @Fields q 自動(dòng)填充輔助字符
*/
private String q;
/**
* 異步請(qǐng)求結(jié)果.
*/
private Map<String, Object> ajaxResultMap;
/**
* @Description 根據(jù)賬套異步加載客戶列表
* @throws Exception
* @return String
*/
public String findCustomerList() throws Exception {
ajaxResultMap = new HashMap<String, Object>();
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
List<ErpCustomer> list = erpDataService.findTop5CustomerList(ledger, q);
ajaxResultMap.put("customerList", list);
return SUCCESS;
}
說(shuō)明：在使用動(dòng)態(tài)加載時(shí)，請(qǐng)求的URL中插件會(huì)自動(dòng)追加q參數(shù)，用于傳輸輸入的參數(shù)。
注：使用Jquery中的autoComplete插件實(shí)現(xiàn)自動(dòng)匹配功能時(shí)，直接使用它來(lái)解析json對(duì)象時(shí)，會(huì)出現(xiàn)一個(gè)錯(cuò)誤提示，因?yàn)樗J(rèn)使用"/n"拆分行、"|"拆分字段。如果需要使用它來(lái)解析json對(duì)象，則需要自己實(shí)現(xiàn)其parse方法。
參數(shù)說(shuō)明：
* minChars (Number):
在觸發(fā)autoComplete前用戶至少需要輸入的字符數(shù).Default: 1，如果設(shè)為0，在輸入框內(nèi)雙擊或者刪除輸入框內(nèi)內(nèi)容時(shí)顯示列表
* width (Number):
指定下拉框的寬度. Default: input元素的寬度
* max (Number):
autoComplete下拉顯示項(xiàng)目的個(gè)數(shù).Default: 10
* delay (Number):
擊鍵后激活autoComplete的延遲時(shí)間(單位毫秒).Default: 遠(yuǎn)程為400 本地10
* autoFill (Boolean):
要不要在用戶選擇時(shí)自動(dòng)將用戶當(dāng)前鼠標(biāo)所在的值填入到input框. Default: false
* mustMatch (Booolean):
如果設(shè)置為true,autoComplete只會(huì)允許匹配的結(jié)果出現(xiàn)在輸入框,所有當(dāng)用戶輸入的是非法字符時(shí)將會(huì)得不到下拉框.Default: false
* matchContains (Boolean):
決定比較時(shí)是否要在字符串內(nèi)部查看匹配,如ba是否與foo bar中的ba匹配.使用緩存時(shí)比較重要.不要和autofill混用.Default: false
* selectFirst (Boolean):
如果設(shè)置成true,在用戶鍵入tab或return鍵時(shí)autoComplete下拉列表的第一個(gè)值將被自動(dòng)選擇,盡管它沒(méi)被手工選中(用鍵盤(pán)或鼠標(biāo)).當(dāng)然如果用戶選中某個(gè)項(xiàng)目,那么就用用戶選中的值. Default: true
* cacheLength (Number):
緩存的長(zhǎng)度.即對(duì)從數(shù)據(jù)庫(kù)中取到的結(jié)果集要緩存多少條記錄.設(shè)成1為不緩存.Default: 10
* matchSubset (Boolean):
autoComplete可不可以使用對(duì)服務(wù)器查詢的緩存,如果緩存對(duì)foo的查詢結(jié)果,那么如果用戶輸入foo就不需要再進(jìn)行檢索了,直接使用緩存.通常是打開(kāi)這個(gè)選項(xiàng)以減輕服務(wù)器的負(fù)擔(dān)以提高性能.只會(huì)在緩存長(zhǎng)度大于1時(shí)有效.Default: true
* matchCase (Boolean):
比較是否開(kāi)啟大小寫(xiě)敏感開(kāi)關(guān).使用緩存時(shí)比較重要.如果你理解上一個(gè)選項(xiàng),這個(gè)也就不難理解,就好比f(wàn)oot要不要到FOO的緩存中去找.Default: false
* multiple (Boolean):
是否允許輸入多個(gè)值即多次使用autoComplete以輸入多個(gè)值. Default: false
* multipleSeparator (String):
如果是多選時(shí),用來(lái)分開(kāi)各個(gè)選擇的字符. Default: ","
* scroll (Boolean):
當(dāng)結(jié)果集大于默認(rèn)高度時(shí)是否使用卷軸顯示 Default: true
* scrollHeight (Number):
自動(dòng)完成提示的卷軸高度用像素大小表示 Default: 180
* formatItem (Function):
為每個(gè)要顯示的項(xiàng)目使用高級(jí)標(biāo)簽.即對(duì)結(jié)果中的每一行都會(huì)調(diào)用這個(gè)函數(shù),返回值將用LI元素包含顯示在下拉列表中. Autocompleter會(huì)提供三個(gè)參數(shù)(row, i, max): 返回的結(jié)果數(shù)組, 當(dāng)前處理的行數(shù)(即第幾個(gè)項(xiàng)目,是從1開(kāi)始的自然數(shù)), 當(dāng)前結(jié)果數(shù)組元素的個(gè)數(shù)即項(xiàng)目的個(gè)數(shù). Default: none, 表示不指定自定義的處理函數(shù),這樣下拉列表中的每一行只包含一個(gè)值.
* formatResult (Function):
和formatItem類(lèi)似,但可以將將要輸入到input文本框內(nèi)的值進(jìn)行格式化.同樣有三個(gè)參數(shù),和formatItem一樣.Default: none,表示要么是只有數(shù)據(jù),要么是使用formatItem提供的值.
* formatMatch (Function):
對(duì)每一行數(shù)據(jù)使用此函數(shù)格式化需要查詢的數(shù)據(jù)格式. 返回值是給內(nèi)部搜索算法使用的. 參數(shù)值row
* extraParams (Object):
為后臺(tái)(一般是服務(wù)端的腳本)提供更多的參數(shù).和通常的作法一樣是使用一個(gè)鍵值對(duì)對(duì)象.如果傳過(guò)去的值是{ bar:4 },將會(huì)被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設(shè)當(dāng)前用戶輸入了foo). Default: {}
* result (handler) Returns: jQuery
此事件會(huì)在用戶選中某一項(xiàng)后觸發(fā)，參數(shù)為：
event: 事件對(duì)象. event.type為result.
data: 選中的數(shù)據(jù)行.
formatted:formatResult函數(shù)返回的值
例如：
$("#singleBirdRemote").result(function(event, data, formatted) {
//如選擇后給其他控件賦值，觸發(fā)別的事件等等
});
注：另一種方式可動(dòng)態(tài)改變參數(shù)傳入值。
我們知道這個(gè)插件有一個(gè)extraParams的參數(shù)，因?yàn)閖query.autoComplete只支持q和limit兩個(gè)參數(shù)，假如有這樣的情況，我們需要向服務(wù)器提交更多參數(shù)怎么辦呢，幸好，作者為我們提供一個(gè)擴(kuò)展參數(shù)，就是extraParams。extraParams好是好，可是不幸的是，它是一個(gè)死的參數(shù)，有時(shí)候，我們需要提交一個(gè)活的參數(shù)到服務(wù)器。舉例說(shuō)明，比如說(shuō)我們有一個(gè)公司名稱的自動(dòng)完成功能，但我們同時(shí)需要向服務(wù)器提供一個(gè)城市的參數(shù)，正常的情況下沒(méi)有問(wèn)題。但當(dāng)城市的名稱是由用戶選擇的時(shí)候，就有問(wèn)題了，也就說(shuō)，這個(gè)城市的名稱是根據(jù)用戶選擇而實(shí)時(shí)變化的，這個(gè)時(shí)候，現(xiàn)有的jquery.autoComplete就無(wú)能為力了。
這個(gè)時(shí)候我們就要考慮修改修改一下jquery.autoComplete了，我們先看一下代碼，代碼有一個(gè)onChange事件，這是一個(gè)解發(fā)事件，我們可以在這里添加一個(gè)回調(diào)函數(shù)來(lái)解決問(wèn)題。首先我們要為options中添加一個(gè)參數(shù)叫onBegin，大致就在400行左右吧，有一行這樣的代碼：
$.Autocompleter.defaults =
我們?cè)诤竺嫣砑右欢?/p>
onBegin: null,
然后我們找到onChange事件，約在226行，代碼如下：
function onChange(crap, skipPrevCheck)
在函數(shù)時(shí)里面添加如下代碼：
if (options.onBegin) {
var op = options.onBegin(options);
if (op) {
$.extend(options, op);
}
}
這段代碼被修改過(guò)后看起來(lái)就像這樣：
function onChange(crap, skipPrevCheck) {
//2010-01-27 ，添加onBegin函數(shù)，以便在啟動(dòng)onChange的時(shí)候，可以重新設(shè)置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();
}
};
再來(lái)看調(diào)用：
/*客戶名稱自動(dòng)匹配*/
function customerAutoComplete(){
$("#customerFullName").autocomplete(encodeURI("/approvalajax/salesOrderApproval_findCustomerList"), {
/**加自定義表頭**/
tableHead: "<div><span style='width:40%' class='col-1'>客戶編碼</span> <span style='width:58%' class='col-2'>客戶名稱</span></div>",
minChars: 0,
width: 310,
multiple: false,
mustMatch: false,
matchContains: false,
matchSubset: false,
autoFill: false,
onBegin: function(options) { //修改--用于動(dòng)態(tài)改變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], //下拉框顯示數(shù)據(jù)格式
value:data.customerList[i].cusName, //選定后實(shí)際數(shù)據(jù)格式
result:data.customerList[i].cusName //選定后輸入框顯示數(shù)據(jù)格式
};
}
return rows;
},
formatItem: function(row, i, max) {
return "<span style='width:40%' class='col-1'>" + row.cusCode + "</span> " + "<span style='width:58%' class='col-2'>" + 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){/**加選中后的回調(diào)函數(shù)**/
clearCustomerInfo();
$("#customerShortName").val(data.cusAbbName);
$("#customerFullName").val(data.cusName);
$("#customerCode").val(data.cusCode);
$("#licensecode").val(data.licensecode);
/*根據(jù)選擇的客戶、賬套加載 對(duì)應(yīng)產(chǎn)品線、收付款協(xié)議、賬期*/
setPLAndPCAndCP(data.cusCode);
}).bind("unmatch", function(){
clearCustomerInfo();
});
}
其實(shí)做的只有三步：
1. 在options中添加一個(gè)onBegin的參數(shù)
2. 在onChange中判斷onBegin是否有賦值，如果有，則調(diào)用這個(gè)函數(shù)，返回將返回值合并到options中去
3. 調(diào)用的時(shí)候，在onBegin函數(shù)中添加一些業(yè)務(wù)邏輯，并可以重新設(shè)置options
就這樣，我們不僅可以達(dá)到動(dòng)態(tài)去添加extraParams參數(shù)，而且還可以動(dòng)態(tài)地修改其它options參數(shù)，這個(gè)onBegin在用戶改變輸入框的值就會(huì)觸發(fā)。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
- Jquery的autocomplete插件用法及參數(shù)講解
- jQuery插件autocomplete使用詳解
- jquery插件autocomplete用法示例
- PHP結(jié)合jQuery.autocomplete插件實(shí)現(xiàn)輸入自動(dòng)完成提示的功能
- jQuery 插件autocomplete自動(dòng)完成應(yīng)用(自動(dòng)補(bǔ)全)(asp.net后臺(tái))
- 小試JQuery的AutoComplete插件
- jquery autocomplete自動(dòng)完成插件的的使用方法
- 使用JQuery自動(dòng)完成插件Auto Complete詳解
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript和JQuery制作簡(jiǎn)易留言板功能，文中的示例代碼講解詳細(xì)，有需要的小伙伴可以參考一下2016-05-05
從最開(kāi)始看到Jquery這樣的選擇器就讓我想起了CSS的選擇器，簡(jiǎn)直是同出一轍啊，CSS的選擇器語(yǔ)法個(gè)人覺(jué)得相當(dāng)?shù)慕?jīng)典，那么Jquery借鑒CSS也就沒(méi)有多少疑問(wèn)了。2009-10-10
基于jquery css3實(shí)現(xiàn)點(diǎn)擊動(dòng)畫(huà)彈出表單源碼特效
這篇文章主要介紹了基于jquery css3實(shí)現(xiàn)點(diǎn)擊動(dòng)畫(huà)彈出表單,彈出的表單沒(méi)有任何遮蓋層，在web前端程序開(kāi)發(fā)中經(jīng)常會(huì)用到，需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery選擇器實(shí)例應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery實(shí)現(xiàn)新消息閃爍標(biāo)題提示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)新消息閃爍標(biāo)題提示的方法,實(shí)例分析了jQuery操作樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)選項(xiàng)卡切換圖片
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)選項(xiàng)卡切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
在Jquery中可以通過(guò)選中a標(biāo)簽使用trigger方法定義事件即可模擬用戶點(diǎn)擊超鏈接或者按鈕，感興趣的朋友操作下2013-10-10
最近有一個(gè)活動(dòng)，其中的數(shù)據(jù)需要和純靜態(tài)html網(wǎng)站進(jìn)行交互。但是由于兩個(gè)網(wǎng)站處于不同的域名下，而Ajax的應(yīng)用中，由于安全的問(wèn)題，瀏覽器默認(rèn)是不支持跨域調(diào)用的，最后選用了JQuery中的getJSON方法2010-12-12
jQuery 移動(dòng)端artEditor富文本編輯器
這篇文章主要介紹了jQuery 移動(dòng)端artEditor富文本編輯器 的相關(guān)資料,需要的朋友可以參考下2016-01-01
jQuery 淡出一個(gè)圖像到另一個(gè)圖像的實(shí)現(xiàn)代碼
這篇文章主要介紹了jquery的hover事件實(shí)現(xiàn)兩個(gè)圖片的淡出切換效果，需要的朋友可以參考下2013-06-06