Why is the item in ajax autocomplete undefined?-CodePudding

I don't understand what goes wrong in autocomplete in .net core

 <p >
        <input type="text" name="SearchString" placeholder="search..."  id="searchInput"/>
        <input type="submit" value="Search" />
        <input type="submit" value="Clear"  onclick="clearData();"/>
        <script>function clearData(){ document.getElementById("searchInput") = '';}
        $(document).ready(function () {    
        $("#searchInput").autocomplete({    
            source: function (request, response) {    
                $.ajax({    
                    url: "/Jewlery/AutoComplete",    
                    type: "POST",    
                    dataType: "json",    
                    data: { Prefix: request.term },    
                    success: function (data) {
                            response($.map(data, function (item) {
                                return item;
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                    }
            });
        });   
        </script>
    </p>

Then, I have the controller

        [HttpPost]
        public JsonResult AutoComplete(string prefix)
        {
            return Json( _jewleryService.AutoComplete(prefix));
        }

This function returns an object of type

public class Jewlery
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public decimal Price { get; set; }
        public string ImageUrl { get; set; }
        public string ImageThumbnailUrl { get; set; }
        public bool IsOnSale { get; set; }
        public bool IsInStock { get; set; }
        public int CategoryId { get; set; }
        public Category Category { get; set; }
    }

I have also tried to return an object label:item.Name, value:item.Id, but it still does not work. Any idea why?

CodePudding user response：

According to your code, you are passing an object, but according to the

CodePudding user response：

There was nothing wrong with the code. The problem was I was trying to access item.Name instead of item.name

success: function (data){
                            response($.map(data, function (item) {
                                return {
                            label: item.name,
                            value: item.iame   ""
                                }}))
                        },