JqGrid с автозаполнением не может проанализировать данные с контроллера для просмотра

Question

В последние несколько дней я пытался заставить работать jqgrid с полями автозаполнения, теперь я могу заставить его работать с локальными данными, но как только я пытаюсь получить данные из моего контроллера, данные не анализируются.

Просмотр кода:

          { name: 'EanNummer', index: 'EanNummer', width: 65, sortable: true, editable: true, edittype: 'text', editoptions: {
              dataInit:
          function (elem) {
              $(elem).autocomplete({ minLength: 0, source: '@Url.Action("GetBrands")' })
              .data("autocomplete")._renderItem = function (ul, item) {
                  return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + item.Id + ", " + item.Name + "</a>")
            .appendTo(ul);
              };
          } 
          }
          },

если вместо source: url я использую source: ["c ++", "java", "php", "coldfusion", "javascript", "asp", "ruby"], например, код работает нормально и отображается значит, что-то не так с моим кодом на стороне контроллера

Код контроллера:

    public JsonResult GetBrands()
    {

        string vendorId = "";
        var username = "";
        var name = System.Web.HttpContext.Current.User.Identity.Name;
        var charArray = name.Split("\\".ToCharArray());
        username = charArray.Last();
        vendorId = service.GetVendorIdByUsername(username);

        List<String> list = new List<String>();
        var brands = service.getBrandsByVendor(vendorId);

        var s= (from brand in brands
                     select new
                     {
                         Id = brand.BrandId,
                         Name = brand.BrandName

                     }).ToList();

        return Json(s);
    }

Answer 1

Если вы используете item.Id и item.Name на стороне клиента, вы должны вернуть не List<String>. Вместо этого вы должны вернуть список new {Id=brand.BrandId, Name=brand.BrandName}. Вы должны просто использовать LINQ вместо foreach:

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

ОБНОВЛЕНО : я изменил для вас демонстрацию из ответа и включил поддержку автозаполнения пользовательского интерфейса jQuery в двух формах. Стандартный рендеринг:

и пользовательский рендеринг:

Функция автозаполнения работает в диалоговом окне расширенного поиска так же, как и в панели инструментов поиска :

Демоверсию можно загрузить с здесь .

Код сервера стандартного автозаполнения

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

Возвращает массив строк в формате JSON. Список заголовков фильтруется аргументом term, который инициализируется строкой, введенной в поле ввода.

Серверный код пользовательского автозаполнения

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

Он использует SqlFunctions.StringConvert , чтобы иметь возможность использовать LIKE при сравнении целых чисел. Кроме того, он возвращает список объектов, имеющих value свойство title. Если вы вернете объекты, имеющие value свойства lable, значения из свойств lable будут отображены в контекстном меню автозаполнения, а соответствующее свойство value будет вставлено в поле ввода. Вместо этого мы используем пользовательское свойство title.

Код клиентской стороны

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

для стандартного рендеринга и

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

для пользовательского рендеринга.

Дополнительно я использую некоторые настройки CSS:

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

Вы можете раскомментировать настройку .ui-autocomplete.ui-menu { opacity: 0.9; }, если хотите немного эффект непрозрачности в контекстном меню автозаполнения.