jQuery Autocomplete nicht angezeigt

Question

Innerhalb eines Jquery Dialog Ich möchte die Jquery Funktion zur automatischen Vervollständigung von jQueryUI verwenden.

Ich habe vorbereitet dann eine Aktion in meinem Controller (Ich bin mit ASP.NET MVC2), die wie folgt lautet

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);
}

Die Klasse ForoModelWS ist eine einfache Klasse verwendet nur die Daten zu halten, die in json übertragen werden soll. Hier ist sie

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

Auf der Client-Seite ich den folgenden jQuery-Code habe:

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

Aber das Schiebefenster mit der suggeestions nicht angezeigt. Wenn ich eine Meldung, in der Antwortfunktion setzen kann ich die richtigen Daten sehen.

Do I miss etwas?

Danke für die Hilfe

1. EDIT : Außerdem Wie Sie den Code ändern, um die „id“ Eigenschaft des ausgewählten Elements in der zurückgegebenen Liste zu benutzen?

2. EDIT : Ich habe mehr mit Chrome-Entwickler-Tool überprüft und ich habe gesehen, dass, wenn die automatische Vervollständigung einige Fehler erscheinen beginnt. Folgendes:

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

Es scheint, dass die Autocomplete-Plugin nicht ein Element nicht finden, wenn er den z-Index des gleitenden Vorschlag 1 Levels Behälter zu setzen versucht. Der erste Fehler angezeigt, wenn die jQuery UI-Dialog öffnet sich. Der Eingang für die die automatische Vervollständigung ist in einer jquery Registerkarte, die in einem ist jquery Dialog

3. EDIT : Ich füge den HTML-Markup als vollständig

<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

Ich habe das Problem gefunden.

In meinem Fall war ich mit auch ein anderes Plugin, diese ein .

Das Plugin wurde am Ende meiner Skripte enthalten und verursachte den Fehler in der Frage beschrieben. Ich habe das Plugin und alles funktioniert sehr fein entfernt.

Bevor es zu entfernen Ich habe auch versucht, das Problem zu isolieren in einer statischen HTML beiden Skripte setzen. Ich erlebte, dass selbst die einfachste Nutzung der zur automatischen Vervollständigung Features, wie diese

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

würde den Fehler verursacht ich habe.

Meine Wahl war Plugin auch das Menü zu entfernen, da dieser Code is'nt mehr unterstützt.

Danke!

Answer 2

Diese Diskussion ist wirklich wie alt es hier nur für den Fall das Hinzufügen hilft es jemand ... Wenn die Autocomplete ist gar nicht so in der Dropdown-Arbeits nicht erscheint dann die erste Prüfung für die einfachste Form es mit harten codiert Vorschläge wie unten.

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

Wenn dies nicht funktioniert, dann es ist ein Problem der jquery Skripte verknüpft. In meinem Fall jquery.min.js war eine ältere Version 1.7.1, während alle anderen Skripte 1.8.18 waren.

Sie einfach die richtige Version von Skript ersetzt das Problem gelöst.

Hope, das hilft jemand mit dem grundlegenden Problem stolpert die automatische Vervollständigung an der Arbeit zu bekommen.

Answer 3

Wie antwortete ich hier , eine Beute an meinem Arbeitsbeispiel von jQuery UI zur automatischen Vervollständigung nehmen. Achten Sie auf die source Teil. Hoffe, es hilft:

    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
       }
      }
     });

Wenn Sie nicht so jetzt tun, bekommen Firebug . Es ist ein unschätzbares Werkzeug für Web-Entwicklung. Sie können einen Haltepunkt in diesem JavaScript gesetzt und sehen, was passiert.

Answer 4

fgmenu Mit dem Funktionsmenü () und auto Mit der Funktion

Der Name der Funktion ist die gleichen Probleme auftreten

Sie können die Funktionsnamen in dem fgmenu.js ändern

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

Answer 5

Auf der Grundlage von Lorenzo Antwort, die ich geändert

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

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

von diesem Plug-ins Menü und es funktionierte gut (sowohl die automatische Vervollständigung und Menü-Plugin)