لا يظهر jQuery AutoComplete

Question

داخل مربع حوار jQuery ، أود استخدام ميزة الإكمال التلقائي JQuery من JQueryui.

لقد قمت بعد ذلك بإعداد إجراء في وحدة التحكم الخاصة بي (أنا أستخدم 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 هي فئة بسيطة تستخدم فقط للاحتفاظ بالبيانات التي يجب نقلها في JSON. ها هو

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 لا تظهر. إذا وضعت تنبيهًا داخل وظيفة الاستجابة ، يمكنني رؤية البيانات الصحيحة.

هل افتقد شيئا؟

شكرا على المساعدة

التحرير الأول: علاوة على ذلك ، كيفية تغيير الرمز لاستخدام خاصية "ID" للعنصر المحدد في القائمة التي تم إرجاعها؟

تحرير 2nd: لقد راجعت المزيد باستخدام أداة مطور Chrome ورأيت أنه عندما يبدأ الإكمال التلقائي بعض الخطأ. ما يلي:

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

يبدو أن المكون الإضافي التلقائي لا يجد عنصرًا عندما يحاول ضبط المؤشر z للاقتراح المنزلق 1 مستوى على الحاوية. يظهر الخطأ الأول عند فتح مربع حوار JQuery UI. يوجد إدخال الإكمال التلقائي داخل علامة تبويب jQuery الموجودة داخل مربع حوار jQuery

تحرير الثالث: أقوم بإضافة علامة HTML ليتم اكتمالها

<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

لقد وجدت المشكلة.

في حالتي ، كنت أستخدم أيضًا مكونًا إضافيًا آخر ، هذا.

تم تضمين هذا البرنامج المساعد في نهاية البرامج النصية الخاصة بي وتسبب في الخطأ الموضح في السؤال. لقد قمت بإزالة المكون الإضافي وكل شيء يعمل بشكل جيد للغاية.

قبل إزالته ، حاولت أيضًا عزل المشكلة في وضع HTML ثابتة على حد سواء. لقد واجهت أنه حتى أبسط استخدام للميزات الإكمال الذاتي ، مثل هذا

<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

هذه المناقشة قديمة حقًا ، ولكن تضافها هنا فقط في حالة مساعدة شخص ما ... إذا كان الإكمال التلقائي لا يعمل على الإطلاق كما في المنسدلة لا تظهر ثم تحقق أولاً من أشكاله البسيطة مع اقتراحات مشفرة صعبة مثل أقل.

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

إذا لم ينجح هذا ، فهذه مشكلة مرتبطة برامج نصية jQuery. في حالتي ، كان jquery.min.js إصدارًا أقدم 1.7.1 في حين أن جميع البرامج النصية الأخرى كانت 1.8.18.

ببساطة استبدال الإصدار الصحيح من البرنامج النصي حل المشكلة.

آمل أن يساعد هذا شخص ما يتعثر في المشكلة الأساسية المتمثلة في الحصول على الإكمال التلقائي للعمل.

Answer 3

تماما كما أجبت هنا, ، خذ نهبًا على مثال العمل الخاص بي على الإكمال التلقائي لـ 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. إنها أداة لا تقدر بثمن لتطوير الويب. يمكنك ضبط نقطة توقف على JavaScript هذا ومعرفة ما يحدث.

Answer 4

FGMENU باستخدام قائمة الوظائف () والإكمال التلقائي باستخدام الوظيفة

اسم الوظيفة هو نفس المشكلات التي تحدث

يمكنك تغيير اسم الوظيفة في fgmenu.js

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

Answer 5

بناءً على إجابة لورينزو ، قمت بتعديلها

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

إلى

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

من هذه المكونات الإضافية قائمة وقد عملت بشكل جيد (كل من الإكمال التلقائي والقائمة المكون الإضافي)