jQuery autoComplete插件兩種使用方式及動態(tài)改變參數(shù)值的方法詳解
本文實例講述了jQuery autoComplete插件兩種使用方式及動態(tài)改變參數(shù)值的方法。分享給大家供大家參考，具體如下：
一、一次加載、多次使用：
前端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: "<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ù)選擇的客戶、賬套加載 對應(yīng)產(chǎn)品線、收付款協(xié)議、賬期*/
setPLAndPCAndCP(data.cusCode);
/*加載存貨編碼*/
setInventoryAutoComplete(data.cusCode);
}).bind("unmatch", function(){
clearCustomerInfo();
});
}
}
});
}
后臺JAVA代碼：
/**
* 異步請求結(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">
<!-- 銷售訂單 審批相關(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)容動態(tài)加載：
前端JS代碼：
/*客戶名稱自動匹配*/
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ù)據(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ù)選擇的客戶、賬套加載 對應(yīng)產(chǎn)品線、收付款協(xié)議、賬期*/
setPLAndPCAndCP(data.cusCode);
/*存貨編碼*/
addInventoryAutoComplete($("#detailListTbody").find("input[tdTag=inventoryCode]"));
}).bind("unmatch", function(){
clearCustomerInfo();
});
}
后臺JAVA代碼：
/**
* @Fields q 自動填充輔助字符
*/
private String q;
/**
* 異步請求結(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;
}
說明：在使用動態(tài)加載時，請求的URL中插件會自動追加q參數(shù)，用于傳輸輸入的參數(shù)。
注：使用Jquery中的autoComplete插件實現(xiàn)自動匹配功能時，直接使用它來解析json對象時，會出現(xiàn)一個錯誤提示，因為它默認(rèn)使用"/n"拆分行、"|"拆分字段。如果需要使用它來解析json對象，則需要自己實現(xiàn)其parse方法。
參數(shù)說明：
* minChars (Number):
在觸發(fā)autoComplete前用戶至少需要輸入的字符數(shù).Default: 1，如果設(shè)為0，在輸入框內(nèi)雙擊或者刪除輸入框內(nèi)內(nèi)容時顯示列表
* width (Number):
指定下拉框的寬度. Default: input元素的寬度
* max (Number):
autoComplete下拉顯示項目的個數(shù).Default: 10
* delay (Number):
擊鍵后激活autoComplete的延遲時間(單位毫秒).Default: 遠(yuǎn)程為400 本地10
* autoFill (Boolean):
要不要在用戶選擇時自動將用戶當(dāng)前鼠標(biāo)所在的值填入到input框. Default: false
* mustMatch (Booolean):
如果設(shè)置為true,autoComplete只會允許匹配的結(jié)果出現(xiàn)在輸入框,所有當(dāng)用戶輸入的是非法字符時將會得不到下拉框.Default: false
* matchContains (Boolean):
決定比較時是否要在字符串內(nèi)部查看匹配,如ba是否與foo bar中的ba匹配.使用緩存時比較重要.不要和autofill混用.Default: false
* selectFirst (Boolean):
如果設(shè)置成true,在用戶鍵入tab或return鍵時autoComplete下拉列表的第一個值將被自動選擇,盡管它沒被手工選中(用鍵盤或鼠標(biāo)).當(dāng)然如果用戶選中某個項目,那么就用用戶選中的值. Default: true
* cacheLength (Number):
緩存的長度.即對從數(shù)據(jù)庫中取到的結(jié)果集要緩存多少條記錄.設(shè)成1為不緩存.Default: 10
* matchSubset (Boolean):
autoComplete可不可以使用對服務(wù)器查詢的緩存,如果緩存對foo的查詢結(jié)果,那么如果用戶輸入foo就不需要再進(jìn)行檢索了,直接使用緩存.通常是打開這個選項以減輕服務(wù)器的負(fù)擔(dān)以提高性能.只會在緩存長度大于1時有效.Default: true
* matchCase (Boolean):
比較是否開啟大小寫敏感開關(guān).使用緩存時比較重要.如果你理解上一個選項,這個也就不難理解,就好比foot要不要到FOO的緩存中去找.Default: false
* multiple (Boolean):
是否允許輸入多個值即多次使用autoComplete以輸入多個值. Default: false
* multipleSeparator (String):
如果是多選時,用來分開各個選擇的字符. Default: ","
* scroll (Boolean):
當(dāng)結(jié)果集大于默認(rèn)高度時是否使用卷軸顯示 Default: true
* scrollHeight (Number):
自動完成提示的卷軸高度用像素大小表示 Default: 180
* formatItem (Function):
為每個要顯示的項目使用高級標(biāo)簽.即對結(jié)果中的每一行都會調(diào)用這個函數(shù),返回值將用LI元素包含顯示在下拉列表中. Autocompleter會提供三個參數(shù)(row, i, max): 返回的結(jié)果數(shù)組, 當(dāng)前處理的行數(shù)(即第幾個項目,是從1開始的自然數(shù)), 當(dāng)前結(jié)果數(shù)組元素的個數(shù)即項目的個數(shù). Default: none, 表示不指定自定義的處理函數(shù),這樣下拉列表中的每一行只包含一個值.
* formatResult (Function):
和formatItem類似,但可以將將要輸入到input文本框內(nèi)的值進(jìn)行格式化.同樣有三個參數(shù),和formatItem一樣.Default: none,表示要么是只有數(shù)據(jù),要么是使用formatItem提供的值.
* formatMatch (Function):
對每一行數(shù)據(jù)使用此函數(shù)格式化需要查詢的數(shù)據(jù)格式. 返回值是給內(nèi)部搜索算法使用的. 參數(shù)值row
* extraParams (Object):
為后臺(一般是服務(wù)端的腳本)提供更多的參數(shù).和通常的作法一樣是使用一個鍵值對對象.如果傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設(shè)當(dāng)前用戶輸入了foo). Default: {}
* result (handler) Returns: jQuery
此事件會在用戶選中某一項后觸發(fā)，參數(shù)為：
event: 事件對象. event.type為result.
data: 選中的數(shù)據(jù)行.
formatted:formatResult函數(shù)返回的值
例如：
$("#singleBirdRemote").result(function(event, data, formatted) {
//如選擇后給其他控件賦值，觸發(fā)別的事件等等
});
注：另一種方式可動態(tài)改變參數(shù)傳入值。
我們知道這個插件有一個extraParams的參數(shù)，因為jquery.autoComplete只支持q和limit兩個參數(shù)，假如有這樣的情況，我們需要向服務(wù)器提交更多參數(shù)怎么辦呢，幸好，作者為我們提供一個擴展參數(shù)，就是extraParams。extraParams好是好，可是不幸的是，它是一個死的參數(shù)，有時候，我們需要提交一個活的參數(shù)到服務(wù)器。舉例說明，比如說我們有一個公司名稱的自動完成功能，但我們同時需要向服務(wù)器提供一個城市的參數(shù)，正常的情況下沒有問題。但當(dāng)城市的名稱是由用戶選擇的時候，就有問題了，也就說，這個城市的名稱是根據(jù)用戶選擇而實時變化的，這個時候，現(xiàn)有的jquery.autoComplete就無能為力了。
這個時候我們就要考慮修改修改一下jquery.autoComplete了，我們先看一下代碼，代碼有一個onChange事件，這是一個解發(fā)事件，我們可以在這里添加一個回調(diào)函數(shù)來解決問題。首先我們要為options中添加一個參數(shù)叫onBegin，大致就在400行左右吧，有一行這樣的代碼：
$.Autocompleter.defaults =
我們在后面添加一段
onBegin: null,
然后我們找到onChange事件，約在226行，代碼如下：
function onChange(crap, skipPrevCheck)
在函數(shù)時里面添加如下代碼：
if (options.onBegin) {
var op = options.onBegin(options);
if (op) {
$.extend(options, op);
}
}
這段代碼被修改過后看起來就像這樣：
function onChange(crap, skipPrevCheck) {
//2010-01-27 ，添加onBegin函數(shù)，以便在啟動onChange的時候，可以重新設(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();
}
};
再來看調(diào)用：
/*客戶名稱自動匹配*/
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) { //修改--用于動態(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ù)據(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ù)選擇的客戶、賬套加載 對應(yīng)產(chǎn)品線、收付款協(xié)議、賬期*/
setPLAndPCAndCP(data.cusCode);
}).bind("unmatch", function(){
clearCustomerInfo();
});
}
其實做的只有三步：
1. 在options中添加一個onBegin的參數(shù)
2. 在onChange中判斷onBegin是否有賦值，如果有，則調(diào)用這個函數(shù)，返回將返回值合并到options中去
3. 調(diào)用的時候，在onBegin函數(shù)中添加一些業(yè)務(wù)邏輯，并可以重新設(shè)置options
就這樣，我們不僅可以達(dá)到動態(tài)去添加extraParams參數(shù)，而且還可以動態(tài)地修改其它options參數(shù)，這個onBegin在用戶改變輸入框的值就會觸發(fā)。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
聊一聊jQuery插件uploadify使用方法，這篇文章主要總結(jié)了uploadify使用的一些經(jīng)驗，感興趣的小伙伴們可以參考一下2016-08-08
可以顯示單圖片，多圖片ajax請求的ThickBox3.1類下載
ThickBox是一個基于JQuery類庫的擴展 以下的是ThickBox3.1的實例+代碼調(diào)用方法2007-12-12
這篇文章主要介紹了jQuery中:focus選擇器用法,以實例形式分析了:focus選擇器的功能、定義及匹配獲取焦點元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
下面小編就為大家?guī)硪黄獪\談jQuery中的$.extend方法來擴展JSON對象。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
10個基于jQuery或JavaScript的WYSIWYG 編輯器整理
10驚人的自由豐富的文本編輯器，將提升您的網(wǎng)站的功能。我已經(jīng)收集了5 jQuery和5個非jQuery實時評價附帶簡單的功能，具有辦公一樣的功能。2010-05-05
下面小編就為大家?guī)硪黄贘query Ajax type的4種類型(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要講述了一個JQuery入門基礎(chǔ)小實例，實現(xiàn)的過程效果都很簡單，特別適合初學(xué)者來學(xué)習(xí)，感興趣的小伙伴們可以參考一下2015-09-09
JQuery中attr方法和removeAttr方法用法實例
這篇文章主要介紹了JQuery中attr方法和removeAttr方法用法,實例分析了jQuery中attr方法設(shè)置屬性與removeAttr方法移除屬性的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
jQuery源碼解讀之extend()與工具方法、實例方法詳解
這篇文章主要介紹了jQuery源碼解讀之extend()與工具方法、實例方法,分析了jQuery中extend()源碼、功能與相關(guān)使用技巧,需要的朋友可以參考下2017-03-03
Ajax一個向后端發(fā)送請求的方式,下面這篇文章主要給大家介紹了關(guān)于jQuery發(fā)送Ajax請求的幾種方法,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用jQuery具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-06-06