C # Webservice json data jquery ui with custom formatting

Question

I use the asp.net webservice to use it in the jQuery UI autocomplete plugin, and here is the data that I get.

{"d":[
    {
        "__type":"WebS.Model.SearchModel",
        "MainCommodityId":1,
        "MainCommodityName":"Pulses",
        "SubcommodityId":3,
        "SubCommodityName":"Urid Dal",
        "BrandId":3,
        "BrandName":"President"
    },
    {
        "__type":"WebS.Model.SearchModel",
        "MainCommodityId":1,
        "MainCommodityName":"Pulses",
        "SubcommodityId":1,
        "SubCommodityName":"Red Gram",
        "BrandId":4,
        "BrandName":"President"
    }
    ]
}

This is the script I use:

$(document).ready(function () {
    $(".input-search").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/WebServices/GetAllBrandNames.asmx/getAllBrands',
                data: "{ 'data': '" + request.term + "'}",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
                        return {
                            value: item.BrandName,
                            label: item.SubCommodityName
                        }
                    }))
                },
                error: function (response) {
                    alert('error');
                },
                failure: function (response) {
                    alert('faii');
                }
            });
        },
        select: function (e, i) {
            console.log(i.MainCommodityId);
            console.log(i.SubcommodityId);
            console.log(i.BrandId);
        },
        minLength: 1
    }).autocomplete("instance")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + "" + item.BrandName + " in " + item.MainCommodityName + " - " + item.SubCommodityName + "</a>")
            .appendTo(ul);
    };
});

Problems:

• When I tried to enter the say: pre keyword , the above output goes to json. However, the list returns only one item "President", where it should display 2 items.
• The list displays "undefined to undefined - undefined" instead of the values ​​after adding the function .autocomplete("instance")._renderItem.
• console.log also undefined after selecting an item.

How can these issues be fixed?

Answer 1

, , . , -.

JavaScript:

$(document).ready(function () {
    $(".input-search").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/WebServices/GetAllBrandNames.asmx/getAllBrands',
                data: "{ 'data': '" + request.term + "'}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    response($.map(data.d, function (item) {
              // don't forget to $.map to (data.d where d is the top node
                        return {
             // assign values from json response for further use
                            brandid: item.BrandId,
                            brand: item.BrandName,
                            maincommodityid: item.MainCommodityId,
                            maincommodity: item.MainCommodityName,
                            subcommodityid: item.SubcommodityId,
                            subcommodity: item.SubCommodityName
                        }
                    }));
                },
                error: function (response) {
                    alert('Server Error. Please try again.');
                },
                failure: function (response) {
                    alert('Failed to get result');
                }
            });
        },
        focus: function (event, ui) {
            // prevent autocomplete from updating the textbox
            event.preventDefault();
        },
        select: function (event, ui) {
            // prevent autocomplete from updating the textbox
            event.preventDefault();
            // do further action here such as assigning id to hidden field etc. 
            $(".input-search").val(ui.item.brand);
            // navigate to the selected item url ex: /catalogue/1/1/pulses/red-gram/4/president
            var str = "/catalogue/" + ui.item.maincommodityid + "/" +
                 ui.item.subcommodityid + "/" + $.trim(ui.item.maincommodity.replace(/\s+/g, '-').toLowerCase()) + "/" +
                 $.trim(ui.item.subcommodity.replace(/\s+/g, '-').toLowerCase()) + "/" + ui.item.brandid + "/" +
                  $.trim(ui.item.brand.replace(/\s+/g, '-').toLowerCase());
            window.location = str;
        },
        minLength: 3
    }).autocomplete("instance")._renderItem = function (ul, item) {
        // get values and create custom display
        var $a = $("<a></a>");                  
        $("<strong></strong>").text(item.brand).appendTo($a);
        $("<span></span>").text(" in ").appendTo($a);
        $("<span></span>").text(item.subcommodity).appendTo($a);
        return $("<li></li>").append($a).appendTo(ul);
    };
});

CSS

    ul.ui-front {
        z-index: 1200; // change z-index according to your UI.
    }

Answer 2

select - ui.item.value. .

select focus event.preventDefault() return false _renderItem .

focus: function(event, ui) {
   // prevent autocomplete from updating the textbox
   event.preventDefault(); // or return false;
}

select: function(event, ui) {
   // prevent autocomplete from updating the textbox
   event.preventDefault(); 
   //do something
}

:

• jQuery
• 2

Answer 3

.

$(document).ready(function () {
var jsondata=array();
$.post("/WebServices/GetAllBrandNames.asmx/getAllBrands",{data: request.term},function(data){
var data=JSON.parse(data);
$.each(data.d, function( index, value ) {
  jsondata[index].value=value;
 });
$(".input-search").autocomplete({
    source:jsondata,
    //other property and events
 })
});

JSON , , AJAX , , , .

, .