JqGrid with autocompletion cannot analyze data from the controller for viewing

Question

In the last few days, I tried to get jqgrid with autocomplete fields to work, now I can get it to work with local data, but as soon as I try to get data from my controller data, it is not parsed.

View code:

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

If instead of source: url I use source: ["C ++", "java", "php", "coldfusion", "javascript", "asp", "ruby"], for example, the code works fine and displays, therefore something must be wrong with my controller side code.

Controller Code:

  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

If you use item.Id and item.Name on the client side, you must return no List<String> . Instead, you should return a list of new {Id=brand.BrandId, Name=brand.BrandName} . You should use LINQ instead of foreach :

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

UPDATED : I changed the demo for you from and turned on jQuery UI autocomplete support in two forms. Standard rendering:

and custom rendering:

The Autocomplete function works in the Advanced Search dialog box in the same way as in the Toolbar Search :

You can download the demo from here .

Autocomplete Server Code

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

It returns an array of strings in JSON format. The list of titles is filtered using the term argument, which will be initialized with the line entered in the input field.

Custom Autocomplete Server Code

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

It uses SqlFunctions.StringConvert to be able to use LIKE when comparing integers. In addition, it returns a list of objects that have a value title property. If you return objects that have the value lable properties, the values ​​from the lable properties will be displayed in the Autocomplete context menu, and the corresponding value property will be inserted into the input field. Instead, we use our own title property.

Client Side Code

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

for standard rendering and

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

for custom rendering.

In addition, I use some CSS settings:

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

You can uncomment .ui-autocomplete.ui-menu { opacity: 0.9; } .ui-autocomplete.ui-menu { opacity: 0.9; } if you want to have a little opacity in the autocomplete context menu.