jQuery ऑटोकंपलेट

Question

एक jquery संवाद के अंदर नहीं दिखता है, मैं jqueryUI की jquery स्वतः पूर्ण सुविधा का उपयोग करना चाहता हूं।

मैं तो मेरे नियंत्रक में एक कार्रवाई (मैं ASP.NET MVC2 उपयोग कर रहा हूँ) है कि डेटा कि स्थानांतरित कर दिया जाएगा धारण करने के लिए एक सरल ही प्रयोग किया जाता वर्ग

public ActionResult GetForos(string startsWith, int pageSize) 
{ 
    // get records from underlying store 
    int totalCount = 0; 
    string whereClause = "Foro Like '" + startsWith + "%'"; 
    List<Foro> allForos = _svc.GetPaged(whereClause, "Foro", 0, pageSize, out totalCount); 

    //transform records in form of Json data 
    List<ForoModelWS> foros = new List<ForoModelWS>(); 
    foreach (Foro f in allForos) 
     foros.Add(new ForoModelWS() { id= Convert.ToString(f.ForoId), 
      text= f.Foro + ", Sezione: " + f.Sezione + ", " + f.AuthorityIdSource.Name }); 

    return Json(foros); 
} 

वर्ग ForoModelWS का पालन के रूप में किया जाता है तैयार किया है जेसन में यहाँ यह

public class ForoModelWS 
{ 
    public string id; 
    public string text; 
} 

ग्राहक के पक्ष मैं निम्नलिखित jQuery कोड है पर है:

<input id="theForo" /> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $("#theForo").autocomplete({ 
      source: function(request, response) { 
       $.ajax({ 
        type: "post", 
        url: "/Foro/GetForos", 
        dataType: "json", 
        data: { 
         startsWith: request.term, 
         pageSize: 15 
        }, 
        success: function(data) { 
         response($.map(data, function(item) { 
          return { 
           label: item.text, 
           value: item.text 
          } 
         })) 
        } 
       }) 
      }, 
      minLength: 2, 
      select: function(event, ui) { 
      }, 
      open: function() { 
       $(this).removeClass("ui-corner-all").addClass("ui-corner-top"); 
      }, 
      close: function() { 
       $(this).removeClass("ui-corner-top").addClass("ui-corner-all"); 
      } 
     }); 

    }); 
</script> 

लेकिन suggeestions साथ फिसलने खिड़की प्रकट नहीं होता है। अगर मैं प्रतिक्रिया समारोह के अंदर एक चेतावनी डालता हूं तो मैं सही डेटा देख सकता हूं।

क्या मुझे कुछ याद आती है? इसके अलावा, कैसे लौटे सूची में चयनित तत्व की "आईडी" संपत्ति का उपयोग करने के कोड को बदलने के लिए:

1 संपादित मदद के लिए धन्यवाद?

दूसरा EDIT: मैंने क्रोम डेवलपर टूल के साथ और अधिक जांच की है और मैंने देखा है कि जब स्वत: पूर्ण कुछ त्रुटि प्रकट होती है। निम्नलिखित:

Uncaught TypeError: Cannot call method 'zIndex' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:317 
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:321 
Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:320 

ऐसा लगता है कि स्वत: पूर्ण प्लगइन एक तत्व जब यह रपट सुझाव 1 स्तर ऊपर अपने कंटेनर की z- सूचकांक सेट करने का प्रयास नहीं मिल रहा है। पहली त्रुटि तब दिखाई देती है जब jquery UI संवाद खुलता है। स्वत: पूर्ण के लिए इनपुट एक jQuery टैब एक jQuery के अंदर है कि संवाद

अंदर है

3 संपादित: मैं पूरा होने की

<td width="40%"> 
    <%= Html.LabelFor(model => model.ForoID)%> 
    <br /> 
    <%= Html.HiddenFor(model => model.ForoID) %> 
    <input id="theForo" /> 
    <%= Html.ValidationMessageFor(model => model.ForoID, "*")%> 
</td> 

Answer 1

मुझे समस्या मिली है।

मेरे मामले में मैं एक और प्लगइन, this one का उपयोग कर रहा था।

वह प्लगइन मेरी लिपियों के अंत में शामिल किया गया था और इस प्रश्न में वर्णित त्रुटि का कारण बन गया था। मैंने प्लगइन हटा दिया है और सब कुछ ठीक काम करता है।

इसे हटाने से पहले मैंने स्क्रिप्ट दोनों को एक स्थिर एचटीएमएल में डालने में समस्या को अलग करने की भी कोशिश की है।मुझे लगता है कि यहां तक ​​कि अनुभवी स्वत: पूर्ण सुविधाओं का सरलतम उपयोग, इस

<script type="text/javascript"> 
$(document).ready(function() { 

    var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", 
    "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", 
    "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"]; 

    $("#theForo").autocomplete({ 
     source: availableTags 
    }); 
}); 
</script> 

तरह त्रुटि मुझे मिल गया का कारण होगा।

मेरी पसंद मेनू प्लगइन को हटाने के लिए भी है क्योंकि यह कोड अब समर्थित नहीं है।

धन्यवाद!

Answer 2

वैसे ही जैसे मैंने जवाब here HTML मार्कअप जोड़ने रहा हूँ, jQuery UI के स्वत: पूर्ण के मेरे कामकाजी उदाहरण पर लूट लें। source भाग पर ध्यान दें। आशा है कि यह मदद करता है:

var cache = {}; 
    $("#textbox").autocomplete({ 
     source: function(request, response) { 
     if (request.term in cache) { 
     response($.map(cache[request.term].d, function(item) { 
     return { value: item.value, id: item.id } 
     })) 
     return; 
     } 
     $.ajax({ 
     url: "/Services/AutoCompleteService.asmx/GetEmployees", /* I use a web service */ 
     data: "{ 'term': '" + request.term + "' }", 
     dataType: "json", 
     type: "POST", 
     contentType: "application/json; charset=utf-8", 
     dataFilter: function(data) { return data; }, 
     success: function(data) { 
     cache[request.term] = data; 
     response($.map(data.d, function(item) { 
      return { 
      value: item.value, 
      id: item.id 
      } 
     })) 
     }, 
     error: HandleAjaxError // custom method 
     }); 
     }, 
     minLength: 3, 
     select: function(event, ui) { 
     if (ui.item) { 
     formatAutoComplete(ui.item); // custom method 
     } 
     } 
    }); 

आप तो अब से नहीं कर रहे हैं, Firebug मिलता है। यह वेब विकास के लिए एक अमूल्य उपकरण है। आप इस जावास्क्रिप्ट पर ब्रेकपॉइंट सेट कर सकते हैं और देखें कि क्या होता है।

Answer 3

लोरेंजो उत्तर के आधार पर मैं इस प्लग-इन menu से

$.fn.fgmenu = function(options) { ... 

संशोधित

$.fn.fgmenu = function(options) { ...  

करने के लिए और यह ठीक काम किया (दोनों स्वत: पूर्ण और मेनू प्लगइन)

Answer 4

इस चर्चा हालांकि वास्तव में पुराना है इसे यहां जोड़कर अगर यह किसी की मदद करता है ... यदि स्वत: पूर्ण ड्रॉप डाउन में काम नहीं कर रहा है तो दिखाई नहीं देता है तो सबसे पहले सबसे सरल जांचें इसके नीचे हार्ड कोडित सुझावों के साथ ई फॉर्म।

$("#txtLanguage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] }); 

यदि यह काम नहीं करता है तो यह जुड़ी स्क्रिप्ट्स की एक समस्या है। मेरे मामले में jquery.min.js एक पुराना संस्करण 1.7.1 था जबकि अन्य सभी स्क्रिप्ट 1.8.18 थीं।

बस स्क्रिप्ट के सही संस्करण को प्रतिस्थापित करने से समस्या हल हो गई।

आशा है कि इससे किसी को काम करने के लिए स्वत: पूर्ण होने की मूल समस्या से जूझने में मदद मिलेगी।

Answer 5

fgmenu समारोह

समारोह नाम ही समस्याएं होती हैं

आप fgmenu.js में समारोह का नाम बदल सकते है का उपयोग करते हुए समारोह मेनू() और स्वत: पूर्ण का उपयोग करना

$('#hierarchybreadcrumb6').menuA({content: $('#hierarchybreadcrumb6').next().html(),backLink: false});