具有自动完成功能的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);
              };
          } 
          }
          },

如果不是源: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 UI Autocomplete支持.标准渲染:

和自定义渲染:

"自动填充"功能在" 高级搜索"对话框中的工作方式与搜索工具栏中的相同:

您可以从这里下载演示.

标准自动完成的服务器代码是

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; }如果要在自动完成上下文菜单中使用一些小的不透明度效果,可以取消注释设置.