jQuery स्वत: पूर्ण आइटम प्रस्तुत नहीं किया गया है

Question

मेरे पास एक ही HTML पर दो टेक्स्टबॉक्स (इनपुट प्रकार टेक्स्ट) हैं जो एक ही स्वत: पूर्ण का उपयोग करते हैं। पहला टेक्स्ट बॉक्स ठीक काम करता है, लेकिन दूसरा टेक्स्ट बॉक्स परिणाम प्रस्तुत नहीं करता है। यह सर्वर के साथ संवाद करता है और मुझे परिणाम मिलते हैं, लेकिन प्रतिपादन समारोह को भी नहीं कहा जाता है। इनपुट के बीच एकमात्र अंतर यह है कि कोई एक div में है जो छुपा शुरू होता है और मैं जेड-ऑर्डर उच्च सेट करके और HTML को मास्क करके डायलॉग विंडो की तरह दिखता हूं।

यहां div के लिए सीएसएस है जहां दूसरा इनपुट बॉक्स स्थित है।

.windowBooking { 
     position:absolute; 
     width:450px; 
    /* height:200px; */ 
     display:none; 
     z-index:9999; 
     padding:20px; 
    } 

स्वत: पूर्ण कार्य:

$(".makeClass").autocomplete({ 
    source: function (request, response) { 
     $('#Code').val(); //clear code value 
     $.ajax({ 
      url: "myUrl", 
      type: 'POST', 
      contentType: "application/json; charset=utf-8", 
      dataType: 'json', //What kind of Result is expected. (Ex json, xml, etc) 
      data: "{'searchItem':'" + request.term + "'}", 
      success: function (data) { 
       var item = []; 
       var len = data.d.length; 
       for (var i = 0; i < len; i++) { 
        var obj = { name: data.d[i].MakeReport, code: data.d[i].MakeCode }; 
        item.push(obj); 
       } 
       response(item); 
      } 
     }) 
    }, 
    focus: function (event, ui) { 
     $(this).val(ui.item.name); 
     return false; 
    }, 
    select: function (event, ui) { 
     $('#Code').val(ui.item.code); 
     $('#Name').val(ui.item.name); 
     $(this).val(ui.item.name); 
     return false; 
    }, 
    open: function() { 
     $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
    }, 
    close: function() { 
     $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
    }, 
    minLength: 2, 
    delay: 250 
}).data("autocomplete")._renderItem = function (ul, item) { 
    var temp = item.name; 
    return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.name + "</a>") 
       .appendTo(ul); 
}; 

इनपुट बॉक्स एक ही कक्षा का उपयोग स्वत: पूर्ण कॉल करने के लिए।

<input id="OtherMake" type="text" maxlength="30" size="20" class="makeClass"/> <!-- It works --> 

    <div id="dialogPlus" class="windowBooking"> 
            : 
    <input type="text" id="MakeName" class="makeClass" /> <!-- doesn't work.--> 
            : 
</div> 

कोई विचार, एक इनपुट बॉक्स में क्यों प्रस्तुत करें और अन्य इनपुट बॉक्स में क्यों नहीं? मुझे दूसरे इनपुट बॉक्स पर स्पष्ट करने दें, काम करने वाली एकमात्र चीज़ रेंडरइटम फ़ंक्शन है जो किसी कारण से इसे निष्पादित नहीं किया जाता है। स्क्रीन पर, आप बहुत से अपरिभाषित देख सकते हैं लेकिन यदि आप किसी भी अपरिभाषित मान का चयन करते हैं तो इनपुट बॉक्स सही मान से भरा होता है।

Answer 1

मुझे अभी भी पता नहीं है कि समस्या का कारण क्या है, लेकिन मैं स्वत: पूर्ण पहुंचने के लिए कक्षा का उपयोग करने के बजाय आईडी का उपयोग करके इसे काम करने में सक्षम था। मेरा अनुमान है कि एक संलग्न रेंडर फ़ंक्शन दो इनपुट बॉक्स के बीच साझा नहीं किया जा सकता है? मुझे नहीं पता, अगर कोई जवाब जानता है और हमारे साथ साझा कर सकता है, तो यह बहुत अच्छा होगा।

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

var makeAutocomplete = { 
     source: function (request, response) { 
      $('#Code').val(); //clear code value 
      $.ajax({ 
       url: myUrl, 
       type: 'POST', 
       contentType: "application/json; charset=utf-8", 
       dataType: 'json', //What kind of Result is expected. (Ex json, xml, etc) 
       data: "{'searchItem':'" + request.term + "'}", 
       success: function (data) { 
        var item = []; 
        var len = data.d.length; 
        for (var i = 0; i < len; i++) { 
         var obj = { name: data.d[i].MakeReport, code: data.d[i].MakeCode }; 
         item.push(obj); 
        } 
        response(item); 
       } 
      }) 
     }, 
     focus: function (event, ui) { 
      $(this).val(ui.item.name); 
      return false; 
     }, 
     select: function (event, ui) { 
      $('#Code').val(ui.item.code); 
      $('#Name').val(ui.item.name); 
      $(this).val(ui.item.name); 
      return false; 
     }, 
     open: function() { 
      $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
     }, 
     close: function() { 
      $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     }, 
     minLength: 2, 
     delay: 250 
    }; 

    var renderList = function (ul, item) { 
     return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.name + "</a>") 
       .appendTo(ul); 
    }; 

    $("#OtherMake").autocomplete(makeAutocomplete).data("autocomplete")._renderItem = renderList; 
    $("#MakeName").autocomplete(makeAutocomplete).data("autocomplete")._renderItem = renderList; 

Answer 2

मैं ने वही समस्या एक वर्ग चयनकर्ता पर _renderItem() को लागू करने के लिए किया था, लेकिन

$.each($(".makeClass"), function(index, item) { 
     $(item).data("autocomplete")._renderItem = function (ul, item) { 
     return $("<li></li>") 
       .data("item.autocomplete", item) 
       .append("<a>" + item.value + " - " + item.label + "</a>") 
       .appendTo(ul); 
     }; 
      }); 

Answer 3

मेरे लिए, क्या यह jQuery UI AutoComplete से appendTo विकल्प का उपयोग कर रहा था ठीक किए जाने के इसे हल।

मेरी समस्या यह थी कि यह इनपुट फ़ील्ड एक मोडल के अंदर था जो पहले नहीं दिखाया गया था। इनपुट के माता-पिता को प्रभावित करने से समस्या ठीक हो गई!

Answer 4

मेरे पास यह बग भी है। यह अजीब बात है कि आईडी के साथ चयनकर्ता _renderItem सही काम करता है। मुझे इस मुद्दे के लिए एक त्वरित हैक मिला:

$.ui.autocomplete.prototype._renderItem = function (ul, item) {}