Unable to retrieve value from json result MVC 4

Question

I'm unable to get the desired result from JSON controller Action. I have searched the internet but no suggested solutions could solve my problem.

My Controller Action:

public JsonResult AutoComplete(string term)
        {
            var result = (from c in db.CategoryContents
                          where c.Title.ToLower().Contains(term.ToLower())
                          select new { c.Title, c.ImageURL, Description = c.Category.Name + " Review" }).Distinct();
                            return Json(result, JsonRequestBehavior.AllowGet);
        }

This is my jQuery ajax file:

$(document).ready(function () {


            var displayLimit = 7;


    // jqueryui autocomplete configuration
    $("#term").autocomplete({
                    source: function (req, resp) { // get JSON object from SearchController
            $.ajax({
                url: "/Search/AutoComplete", // SearchController JsonResult
                type: "POST",
                dataType: "json",
                data: { term: req.term },
                success: function (data) {
                    resp($.map(data, function (item) {

                        return { label: item.Name, value: item.Name, imageURL: item.ImageURL, id: item.ID };
                    }

                    ));
                }
            });
        },



        select: function (event, ui) { // keyword selected; parse values and forward off to ProductController's ViewProduct View
            var selected = ui.item;
            var mdlNum, mdlName;

            if (selected.value !== null) {
                var array = selected.value.split(' ');
                mdlNum = array[0].toLowerCase();
                //   mdlName = selected.value.replace(array[0], '').trim().toLowerCase().replace(/[^a-z0-9]+/g, ' ');
                // window.location.replace('http://' + location.host + '/Search/Refine?ref=' + mdlNum + '' + mdlName);
                window.location.replace('http://' + location.host + '/Category/Details/' + ui.id);

            }

        },

        open: function () { $('ul.ui-autocomplete').addClass('opened') },
        close: function () { $('ul.ui-autocomplete').removeClass('opened').css('display', 'block'); }


    }) 

.data("ui-autocomplete")._renderItem = function (ul, item) {

            //var inner_html = '<a><div id="example" class="k-content"><div class="demo-section"><div class=".customers-list img"><img src="' + "../common/theme/images/gallery/3.jpg" + '"></div><div class="customers-list h3">' + item.label + '</div><div class="customers-list p">' + item.description + '</div></div></div></a>';


            var newText = String(item.value).replace(
                   new RegExp(this.term, "gi"),
                   "<strong>$&</strong>"
                 //  "<span class='ui-state-highlight'>$&</span>"
                   );

            var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.imageURL + '" alt="" /></div><div class="labels">' + newText + '</div><div class="description">' + item.id + '</div></div></a>';


            return $("<li></li>")
                .data("item.autocomplete", item).append(inner_html)
                .appendTo(ul);

        };

It is not returning productId, I have got error on this line:

window.location.replace('http://' + location.host + '/Category/Details/' + ui.id);

It is saying /Category/Details/undefined but I want id here instead of undefined. Please help.

Answer 1

You need to return your ID from your autocomplete, it is missing from your projection.

Change it to the following instead:

var result = (from c in db.CategoryContents
                          where c.Title.ToLower().Contains(term.ToLower())
                          select new { c.Title, c.ImageURL, Description = c.Category.Name + " Review", ID = c.ID }).Distinct();
                            return Json(result, JsonRequestBehavior.AllowGet);

The above assumes that your ID in the db is uppercase.

Answer 2

jQuery UI Autocomplete needs a datasource with just label and value properties. Even though you're passing it extra properties: imageURL and id, those won't be available in your select callback.

Change this:

resp($.map(data, function (item) {
    return { label: item.Name, value: item.ID, imageURL: item.ImageURL, id: item.ID };
}

And this:

window.location.replace('http://' + location.host + '/Category/Details/' + ui.item.value);

I've changed it so the value for each suggestion item is set as the item.ID from your web service. This is then available through ui.item.value in the callback.