我使用的是jQuery UI AutoComplete control(剛更新到jQuery UI 1.8.1)。每當用戶離開文本框時,我想將文本框的內容設置爲已知值,併爲所選值設置一個隱藏ID字段。此外,我希望頁面在文本框內容發生更改時發回。jQuery AutoComplete選擇更改後觸發嗎?
目前,我正在通過讓自動完成選擇事件設置隱藏ID,然後在設置文本框值的文本框上設置更改事件來實現此目的,並在必要時導致回發。
如果用戶只是使用鍵盤,這完美的作品。您可以輸入,使用向上和向下箭頭選擇一個值,然後選擇退出。 select事件觸發,id被設置,然後change事件觸發,頁面回傳。
如果用戶開始鍵入然後使用鼠標從自動填充選項中選取,則更改事件觸發(焦點轉移到自動填充菜單?),並在選擇事件有機會設置之前返回頁面回覆ID。
有沒有辦法讓更改事件不會觸發,直到選擇事件後,即使使用鼠標?
$(function() {
var txtAutoComp_cache = {};
var txtAutoComp_current = { label: $('#txtAutoComp').val(), id: $('#hiddenAutoComp_ID').val() };
$('#txtAutoComp').change(function() {
if (this.value == '') { txtAutoComp_current = null; }
if (txtAutoComp_current) {
this.value = txtAutoComp_current.label ? txtAutoComp_current.label : txtAutoComp_current;
$('#hiddenAutoComp_ID').val(txtAutoComp_current.id ? txtAutoComp_current.id : txtAutoComp_current);
} else {
this.value = '';
$('#hiddenAutoComp_ID').val('');
}
// Postback goes here
});
$('#txtAutoComp').autocomplete({
source: function(request, response) {
var jsonReq = '{ "prefixText": "' + request.term.replace('\\', '\\\\').replace('"', '\\"') + '", "count": 0 }';
if (txtAutoComp_cache.req == jsonReq && txtAutoComp_cache.content) {
response(txtAutoComp_cache.content);
return;
}
$.ajax({
url: 'ajaxLookup.asmx/CatLookup',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
data: jsonReq,
type: 'POST',
success: function(data) {
txtAutoComp_cache.req = jsonReq;
txtAutoComp_cache.content = data.d;
response(data.d);
if (data.d && data.d[0]) { txtAutoComp_current = data.d[0]; }
}
});
},
select: function(event, ui) {
if (ui.item) { txtAutoComp_current = ui.item; }
$('#hiddenAutoComp_ID').val(ui.item ? ui.item.id : '');
}
});
});
文本框和隱藏的ID值是從以前的帖子後面繼續保留的,所以我看不到一個簡單的方法來確定我已經捕獲了當前的更改,而不是已經處理的一些過去的更改。我想問題是退出文本框沒有選擇一個項目是有效的,需要與選擇一個項目時退出文本框分開處理,我不能確定如果選擇更改後觸發如何確定發生了什麼。 – Zarigani 2010-05-19 23:54:44