JqGrid mit autocompletion cant parse-Daten vom controller zum view

Wenn Sie item.Id und item.Name auf der client-Seite sollten Sie wieder nicht die List<String>. Stattdessen sollten Sie gibt die Liste der new {Id=brand.BrandId, Name=brand.BrandName}. Man sollte Sie nur verwenden, LINQ statt foreach:

return Json ((from brand in brands
              select new {
                  Id = brand.BrandId,
                  Name = brand.BrandName
              }).ToList());

AKTUALISIERT: modifizierte ich für Euch die demo von die Antwort und enthalten die jQuery-UI-Autocomplete-Unterstützung in zwei Formen. Die standard-rendering:

- und custom-rendering:

Die AutoVervollständigen-Funktion arbeitet in Erweiterte Suche dialog in der gleichen Weise wie in der Suchen-Symbolleiste:

Herunterladen können Sie die demo von hier.

Den server-code der standard-AutoVervollständigen ist

public JsonResult GetTitleAutocomplete (string term) {
    var context = new HaackOverflowEntities();
    return Json ((from item in context.Questions
                  where item.Title.Contains (term)
                  select item.Title).ToList(),
                 JsonRequestBehavior.AllowGet);
}

Es gibt array von strings im JSON-format. Die Liste von Titeln gefiltert werden, indem term argument, die initialisiert werden, um die Zeichenfolge in das Eingabefeld eingegeben hat.

Den server-code der custom autocomplete ist

public JsonResult GetIds (string term) {
    var context = new HaackOverflowEntities();
    return Json ((from item in context.Questions
                  where SqlFunctions.StringConvert((decimal ?)item.Id).Contains(term) 
                  select new {
                      value = item.Id,
                      //votes = item.Votes,
                      title = item.Title
                  }).ToList (),
                 JsonRequestBehavior.AllowGet);
}

Es nutzt SqlFunctions.StringConvert nutzen zu können LIKE im Vergleich der Ganzzahlen. Außerdem gibt es die Liste der Objekte mit value die title Eigenschaft. Wenn Sie zurückkehren würde-Objekte mit value die lable Eigenschaften die Werte aus der lable Eigenschaften wird angezeigt, in der AutoVervollständigen-Kontext-Menü und die entsprechenden value - Eigenschaft eingefügt werden sollen, in das Eingabefeld ein. Wir verwenden benutzerdefinierte title - Eigenschaft statt.

Den code der client-Seite ist

searchoptions: {
    dataInit: function (elem) {
        $(elem).autocomplete({ source: '<%= Url.Action("GetTitleAutocomplete") %>' });
    }
}

für die standard-rendering-und

searchoptions: {
    sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
    dataInit: function (elem) {
        //it demonstrates custom item rendering
        $(elem).autocomplete({ source: '<%= Url.Action("GetIds") %>' })
            .data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a><span style='display:inline-block;width:60px;'><b>" +
                        item.value + "</b></span>" + item.title + "</a>")
                    .appendTo(ul);
            };
    }
}

für das benutzerdefinierte rendering.

Zusätzlich verwende ich einige CSS-Einstellungen:

.ui-autocomplete {
    /* for IE6 which not support max-height it can be width: 350px; */
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    /* add padding to account for vertical scrollbar */
    padding-right: 20px;
}
/*.ui-autocomplete.ui-menu { opacity: 0.9; }*/
.ui-autocomplete.ui-menu .ui-menu-item { font-size: 0.75em; }
.ui-autocomplete.ui-menu a.ui-state-hover { border-color: Tomato }
.ui-resizable-handle {
    z-index: inherit !important;
}

Können Sie kommentieren .ui-autocomplete.ui-menu { opacity: 0.9; } Einstellung, wenn Sie möchten, haben einige kleine
Deckkraft-Effekt in der AutoVervollständigen-Kontext-Menü.