jQuery AutoComplete funktioniert nicht

Innerhalb einer jquery dialog, den ich möchte die jquery-autocomplete-Funktion von jqueryUI.

Habe ich dann bereit, eine Aktion in meinem Controller (die ich benutze ASP.NET MVC2) , wird wie folgt

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

Klasse ForoModelWS ist eine einfache Klasse verwendet, nur zum halten der Daten, die übertragen werden sollen in json. Hier ist es

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

Auf der client-Seite habe ich folgenden jquery-code:

<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 Schiebe-Fenster mit der suggeestions nicht angezeigt. Wenn ich einen Alarm innerhalb der Antwort-Funktion, die ich sehen kann, die korrekten Daten.

Vermisse ich etwas?

Danke für die Hilfe

1. BEARBEITEN:
Darüber, Wie man den code zu ändern, verwenden Sie die "id" - Eigenschaft für das ausgewählte element in der zurückgegebenen Liste?

2. BEARBEITEN:
Ich habe mehr mit den Chrome developer tool und ich habe gesehen, dass bei der autocomplete beginnt einige Fehler angezeigt. die folgenden:

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

Scheint es, dass die autocomplete-plugin nicht finden, ein element, wenn es versucht, zum festlegen der z-Index des Schiebe-Vorschlag 1 level up seine container. Der erste Fehler wird angezeigt, wenn die jquery-UI-Dialog öffnet sich. Der Eingang für die Autovervollständigung ist im inneren ein jquery-tab, der in einem jquery Dialog

3. BEARBEITEN:
Ich füge den HTML-markup 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>

InformationsquelleAutor Lorenzo | 2010-09-14