2010-05-19 154 views
5

我使用的是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 : ''); 
     } 
    }); 
}); 

回答

0

我不知道防止更改事件燒製而成,但你可以很容易地扔在你改變事件的一些條件語句是確保隱藏字段已經被設置和文本框目前有一個值。

+0

文本框和隱藏的ID值是從以前的帖子後面繼續保留的,所以我看不到一個簡單的方法來確定我已經捕獲了當前的更改,而不是已經處理的一些過去的更改。我想問題是退出文本框沒有選擇一個項目是有效的,需要與選擇一個項目時退出文本框分開處理,我不能確定如果選擇更改後觸發如何確定發生了什麼。 – Zarigani 2010-05-19 23:54:44

3

您可以通過將您的更改事件實現爲自動完成選項來解決此問題,就像select一樣,而不是使用jQuery的change()函數。

您可以在the autocomplete demo & documentation page處看到活動列表。它聲明,更改事件總是在關閉事件後觸發,我認爲這是在選擇事件之後觸發的。查看'combobox'的來源以查看示例更改事件掛鉤。

+0

這是一個最好的答案,爲了實現這個策略的變化是必要的。 – 2012-12-12 11:13:22

1

它爲我鼠標選擇時,我這樣做:

focus: function (event, ui) { 
         $j(".tb").val(ui.item.value); 
         return true; 
        } 

這使文本框的文本來改變鼠標的焦點事件,就像它發生在鍵盤事件的方式。當我們選擇一個項目時,它會觸發選擇更改。

+2

除了他沒有使用自動完成焦點事件,他正在使用jQuery更改事件。 – 2011-08-28 04:03:33

相關問題