2012-04-05 14 views
7

नीचे स्निपेट में साथ मूल्य लेकिन संयोजन के रूप में यूआई में प्रदर्शन लेबल, साथ स्वत: पूर्ण अद्यतन छिपी हुई फ़ील्ड, मैं कैसे करने के लिए jQuery स्वत: पूर्ण प्लगइन प्राप्त कर सकते हैं: UserID साथjQuery यूआई ASMX

  1. अद्यतन एक छिपी हुई फ़ील्ड
  2. अद्यतन पूरा नाम

मेरा मानना ​​है कि मैं .result उपयोग करने की आवश्यकता है, लेकिन मैं वाक्य रचना को समझ नहीं सकता के साथ '#MessageTo'। कृपया ध्यान दें कि मैं उपयोग कर रहा हूँ ASMX तो मैं एक पोस्ट करना चाहिए

$("#MessageTo").autocomplete({ 
     dataType: "json", 
     autoFocus: true, 
     minLength: 3, 
     source: function (request, response) { 
      var postParams = "{ pattern: '" + $("#MessageTo").val() + "' }"; 

      return jQuery_1_7_1.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: '/Services/Users.asmx/GetNames', 
       data: postParams, 
       dataType: "json", 
       success: function (data) { 
        response($.map(data.d.Users, function (c) { 
         return { 
          label: c.FullName, 
          value: c.UserID 
         }; 
        })); 
       } 
      }); 
     } 
    }); 

मैं ASMX साथ संयोजन के रूप में कुछ इसी तरह के पदों लेकिन नहीं देख (सुरक्षा जोखिम सक्षम करने के लिए नहीं करना चाहते हैं)।

+0

'data.d' के लिए' d' संपत्ति क्या है? – Kiquenet

+0

प्रतिक्रिया (डेटा) में एक json ऑब्जेक्ट डी – Hoppe

उत्तर

7

मेरा मानना ​​है कि आप पृष्ठ पर अन्य HTML तत्वों को अपडेट करने में रुचि रखते हैं, जब उपयोगकर्ता स्वत: पूर्ण-सक्षम टेक्स्टबॉक्स से कुछ चुनता है - क्या यह सही है?

आपके द्वारा ऊपर दिया गया कोड शायद उपयोगकर्ता के प्रकार के रूप में स्वत: पूर्ण "सुझाव" प्रदान करने के लिए पहले से ही काम करता है। यदि मैं सही ढंग से समझता हूं, तो उपयोगकर्ता कुछ सुझावों को अपडेट करना चाहता है जब उपयोगकर्ता सुझाव में से किसी एक को स्वीकार करता है।

ऐसा करने के लिए, स्वत: पूर्ण विकल्पों के select सदस्य का उपयोग करें।

$("#MessageTo") 
    .autocomplete({ 
     dataType: "json", 
     autoFocus: true, 
     minLength: 3, 
     source: function (request, response) { 
      var postParams = "{ pattern: '" + $("#MessageTo").val() + "' }"; 

      return jQuery_1_7_1.ajax({ 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       url: '/Services/Users.asmx/GetNames', 
       data: postParams, 
       dataType: "json", 
       success: function (data) { 
        response($.map(data.d.Users, function (c) { 
         return { 
          label: c.FullName, 
          value: c.UserID 
         }; 
        })); 
       } 
      }); 
     }, 

     select: function (event, ui) { 
      var v = ui.item.value; 
      $('#MessageTo').html("Something here" + v); 
      $('#Hidden1').html("Something else here" + v); 
      // update what is displayed in the textbox 
      this.value = v; 
      return false; 
     } 

    }); 

इसके अलावा: एएसएमएक्स का आपका उपयोग अप्रासंगिक है। स्वतः पूर्ण के परिप्रेक्ष्य से, यह डेटा के लिए सिर्फ एक स्रोत है। इसके अलावा, POST का उपयोग अप्रासंगिक है। HTTP GET को अनुमति देने के लिए सर्वर पक्ष पर ASMX को कॉन्फ़िगर करना संभव है। यदि आप इसे सक्षम करते हैं तो यह सुरक्षा छेद नहीं है। यह अनुरोध स्वीकार करने का एक अलग तरीका है।

स्वत: पूर्ण बॉक्स यह नहीं बता सकता कि सर्वर पक्ष ASMX या पायथन, या एएसपी-क्लासिक, या PHP, या कुछ और है। अगर मैं सही तरीके से प्रश्न समझ गया हूं, तो आपकी टिप्पणी मुझे कुछ समान पोस्ट दिखाई देती हैं लेकिन ASMX के संयोजन के साथ अप्रासंगिक नहीं है।

+0

में उपयोगी डेटा भी शामिल है, पूर्ण नाम को अपने स्वत: पूर्ण में प्रदर्शित करने के लिए ui.item.label का उपयोग करें। – Prusprus

7

आप सही हैं कि आप चयन कॉन्फ़िगरेशन विकल्प का उपयोग करना चाहते हैं - जो मूल्य आप चाहते हैं वे आपके कस्टम फ़ंक्शन पर ui.item.value और ui.item.label के रूप में पास किए गए हैं। आप डिफ़ॉल्ट व्यवहार को रोकने और this का उपयोग कर लक्ष्य तत्व तक पहुंचने के लिए return false कर सकते हैं। यानी

$("#MessageTo").autocomplete({ 
    /* Existing code is all OK */ 

    select: function (event, ui) { 
     // Set autocomplete element to display the label 
     this.value = ui.item.label; 

     // Store value in hidden field 
     $('#hidden_field').val(ui.item.value); 

     // Prevent default behaviour 
     return false; 
    } 
}); 
संबंधित मुद्दे