Why is the item in ajax autocomplete undefined?

Question

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

 <p class="par-style">
        <input type="text" name="SearchString" placeholder="search..." class="col-sm-5 search-style" id="searchInput"/>
        <input type="submit" value="Search" class="search-button"/>
        <input type="submit" value="Clear" class="search-button" 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?

Answer 1

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.name + ""
                                }}))
                        },

Answer 2

According to your code, you are passing an object, but according to the official documentation, the data type returned by autoComplete is the format of lable and Value, so you will report an error. You can change the format to the format supported by autoComplete like below in your success.

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

A work demo as below ,you can refer to it.

customer.cs:

public class customer
    {
      public string ContactName { get; set; }
        public int CustomerID { get; set; }
    } 

HomeController.cs:

public class HomeController : Controller
    {
        private readonly AutoCompleteInMVCJsonContext _context;

        public HomeController(AutoCompleteInMVCJsonContext context)
        {
            _context = context;
        }

        public IActionResult Index()
        {
            return View();
        }
        [HttpPost]
    public JsonResult AutoComplete(string prefix)
        {
            var customers = (from customer in _context.Customers
                             where customer.ContactName.StartsWith(prefix)
                             select customer).ToList();

            return Json(customers);
    }

Index view:

@{
    Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>Index</title>
</head>
<body>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
    <link href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
          rel="Stylesheet" type="text/css"/>
    <script type="text/javascript">
$(document).ready(function () {
            $("#txtCustomer").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: '/Home/AutoComplete/',
                        dataType: "json",    
                        data: { "prefix": request.term },
                        type: "POST",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                            label: item.contactName,
                            value: item.contactName + ""
                        } 
                        
                      
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                }
             
            });
        });
    </script>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input type="text" id="txtCustomer" name="CustomerName"/>
      
   
        <input type="submit" id="btnSubmit" value="Submit"/>
      
    }
</body>
</html>

result: