Autocomplete search is not displaying suggestions in asp.net mvc?

Question

I want to display the autocomplete suggestion in the drop-drop list. But the suggestions are not displaying. I have tried with database and through list but result remains the same.

Here is the Code

Model contains ID and Name

HomeController.cs

 public class HomeController : Controller
{
    // GET: Home  
    [HttpGet]
    public ActionResult Index()
    {
        return View();
    }
    [HttpPost]
    public JsonResult Index(string Prefix)
    {
        //Note : you can bind same list from database  
        List<City> ObjList = new List<City>()
        {

            new City {Id=1,Name="abc" },
            new City {Id=2,Name="def" },
            new City {Id=3,Name="ghi" },
            new City {Id=4,Name="jkl" },

    };
        //Searching records from list using LINQ query  
        var CityName = (from N in ObjList
                        where N.Name.StartsWith(Prefix)
                        select new { N.Name });
        return Json(CityName, JsonRequestBehavior.AllowGet);
    }

Index.cs

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
<script src="//code.jquery.com/jquery-1.10.2.js"></script>  
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
<script type="text/javascript">  
    $(document).ready(function () {  
        $("#CityName").autocomplete({  
            source: function (request, response) {  
                $.ajax({  
                    url: "/Home/Index",  
                    type: "POST",  
                    dataType: "json",  
                    data: { Prefix: request.term },  
                    success: function (data) {  
                        response($.map(data, function (item) {  
                            return { label: item.Name, value: item.Name };  
                        }))  

                    }  
                })  
            },  
            messages: {  
                noResults: "", results: ""  
            }  
        });  
    })  
</script>  
@using (Html.BeginForm())  
{  
    @Html.AntiForgeryToken()  

    <div class="form-horizontal">  

        <hr />  

        <div class="form-group">  

            <div class="col-md-12">  
                @Html.EditorFor(model => model.CityName, new { htmlAttributes = new { @class = "form-control" } })  

            </div>  
        </div>  

    </div>  
}  

Please if anyone can guide me what am i lacking? Thanks in advance.

Answer 1

The CityName written in there is wrong because model do not contains CityName. just replace CityNameby Name. Then it will works finely.

$("#Name").autocomplete({  
        source: function (request, response) {  
            $.ajax({  
                url: "/Home/Index",  
                type: "POST",  
                dataType: "json",  
                data: { Prefix: request.term },  
                success: function (data) {  
                    response($.map(data, function (item) {  
                        return { label: item.Name, value: item.Name };  
                    }))  

                }  
            })  
        },  
        messages: {  
            noResults: "", results: ""  
        }  
    });  

and in view

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })