2010-05-19 21 views
5

मैं jQuery UI AutoComplete control का उपयोग कर रहा हूं (बस jQuery UI 1.8.1 में अपडेट किया गया है)। जब भी उपयोगकर्ता टेक्स्ट बॉक्स छोड़ देता है, तो मैं टेक्स्ट बॉक्स की सामग्री को ज्ञात-अच्छे मान पर सेट करना चाहता हूं और चयनित मूल्य के लिए एक छुपा आईडी फ़ील्ड सेट करना चाहता हूं। इसके अतिरिक्त, मैं पृष्ठ को वापस पोस्ट करना चाहता हूं जब टेक्स्ट बॉक्स की सामग्री बदली जाती है।jQuery स्वत: पूर्ण परिवर्तन के बाद फायरिंग का चयन करें?

वर्तमान में, मैं स्वत: पूर्ण चयन ईवेंट को छुपा आईडी सेट करके और फिर टेक्स्ट बॉक्स पर एक परिवर्तन ईवेंट करके इसे कार्यान्वित कर रहा हूं जो टेक्स्टबॉक्स मान सेट करता है और यदि आवश्यक हो, तो एक पोस्ट बैक का कारण बनता है।

यदि उपयोगकर्ता कीबोर्ड का उपयोग करता है, तो यह पूरी तरह से काम करता है। आप टाइप कर सकते हैं, एक मान का चयन करने के लिए ऊपर और नीचे तीरों का उपयोग करें और फिर बाहर निकलने के लिए टैब का उपयोग करें। चुनिंदा घटना आग लगती है, आईडी सेट की जाती है और फिर परिवर्तन घटना आग लगती है और पृष्ठ पोस्ट वापस आ जाता है।

यदि उपयोगकर्ता टाइपिंग शुरू करता है और फिर स्वत: पूर्ण विकल्पों में से चुनने के लिए माउस का उपयोग करता है, तो परिवर्तन घटना आग लगती है (जैसे फोकस स्वत: पूर्ण मेनू में बदल जाता है?) और चयन ईवेंट को सेट करने का मौका मिलने से पहले पृष्ठ पोस्ट आईडी।

क्या घटना का चयन होने तक भी ईवेंट को आग लगने का कोई तरीका नहीं है, यहां तक ​​कि जब माउस का उपयोग किया जाता है?

$(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

टेक्स्टबॉक्स और छुपा आईडी मान पिछले पोस्ट बैक से बने रहे हैं, इसलिए मुझे यह निर्धारित करने का एक आसान तरीका नहीं दिख रहा है कि मैंने पहले से ही कुछ बदलावों के बजाय वर्तमान परिवर्तन को पकड़ा है। मुझे लगता है कि समस्या यह है कि किसी आइटम को चुने बिना टेक्स्ट बॉक्स से बाहर निकलना वैध है और किसी आइटम को चुनते समय टेक्स्ट बॉक्स से बाहर निकलने से अलग से संभाला जाना चाहिए और मैं यह निर्धारित नहीं कर सकता कि यह बदलने के लिए कि क्या हो रहा है, अगर परिवर्तन के बाद आग का चयन करें। – Zarigani

3

आप jQuery के परिवर्तन() फ़ंक्शन का उपयोग करने के बजाय, अपने परिवर्तन ईवेंट को स्वत: पूर्ण विकल्प के रूप में लागू करके हल कर सकते हैं।

आप the autocomplete demo & documentation page पर ईवेंट की सूची देख सकते हैं। यह बताता है कि निकट घटना के बाद परिवर्तन घटना को हमेशा निकाल दिया जाता है, जिसे मैं चुनता हूं कि चयन कार्यक्रम के बाद निकाल दिया जाता है। एक उदाहरण परिवर्तन घटना हुक देखने के लिए 'combobox' के स्रोत पर एक नज़र डालें।

+0

रणनीति का यह परिवर्तन लागू करने के लिए यह एक अच्छा जवाब है। –

1

यह माउस पर मेरे लिए काम किया चयन जब मैं ऐसा किया:

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

इस टेक्स्ट बॉक्स पाठ अभी जिस तरह यह कीबोर्ड की घटनाओं पर होता है जैसे, माउस फोकस घटनाओं पर बदलने के लिए कारण बनता है। और जब हम कोई आइटम चुनते हैं, तो यह ट्रिगर चयन बदल जाता है।

+2

सिवाय इसके कि वह ऑटो पूर्ण फोकस ईवेंट का उपयोग नहीं करता है, वह jquery परिवर्तन ईवेंट का उपयोग कर रहा है। –

संबंधित मुद्दे