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ù)怎么辦呢，幸好，作者為我們提供一個擴(kuò)展參數(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擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript和JQuery制作簡易留言板功能，文中的示例代碼講解詳細(xì)，有需要的小伙伴可以參考一下2016-05-05
從最開始看到Jquery這樣的選擇器就讓我想起了CSS的選擇器，簡直是同出一轍啊，CSS的選擇器語法個人覺得相當(dāng)?shù)慕?jīng)典，那么Jquery借鑒CSS也就沒有多少疑問了。2009-10-10
基于jquery css3實現(xiàn)點擊動畫彈出表單源碼特效
這篇文章主要介紹了基于jquery css3實現(xiàn)點擊動畫彈出表單,彈出的表單沒有任何遮蓋層，在web前端程序開發(fā)中經(jīng)常會用到，需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了jQuery選擇器實例應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
jQuery實現(xiàn)新消息閃爍標(biāo)題提示的方法
這篇文章主要介紹了jQuery實現(xiàn)新消息閃爍標(biāo)題提示的方法,實例分析了jQuery操作樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)選項卡切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
在Jquery中可以通過選中a標(biāo)簽使用trigger方法定義事件即可模擬用戶點擊超鏈接或者按鈕，感興趣的朋友操作下2013-10-10
最近有一個活動，其中的數(shù)據(jù)需要和純靜態(tài)html網(wǎng)站進(jìn)行交互。但是由于兩個網(wǎng)站處于不同的域名下，而Ajax的應(yīng)用中，由于安全的問題，瀏覽器默認(rèn)是不支持跨域調(diào)用的，最后選用了JQuery中的getJSON方法2010-12-12
這篇文章主要介紹了jQuery 移動端artEditor富文本編輯器 的相關(guān)資料,需要的朋友可以參考下2016-01-01
jQuery 淡出一個圖像到另一個圖像的實現(xiàn)代碼
這篇文章主要介紹了jquery的hover事件實現(xiàn)兩個圖片的淡出切換效果，需要的朋友可以參考下2013-06-06