Implement jQuery AutoComplete TextBox in ASP.Net MVC

<!-- autosearch -->

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

 

<script>

    debugger;

    $("#CityName").autocomplete({

        source: function (request, response) {

            $.ajax({

                url: "/Encrochment/GetRecord",

                type: "POST",

                dataType: "json",

                data: { Prefix: request.term },

                success: function (data) {

                    response($.map(data, function (item) {

                        debugger;

                        return { label: item.TownName, value: item.TownName };

                    }))

                }

            })

        },

        messages: {

            noResults: "", results: ""

        }

    });

</script>

  <input type="text" id="CityName" style="width:200px;" />

  [HttpPost]

        public JsonResult GetRecord(string Prefix)

           {

            MainModel itemnew = new MainModel();

            itemnew.TownMasterList = TownMasterManager.GetAll().ToList();

            //Searching records from list using LINQ query  

            var CityName = (from N in itemnew.TownMasterList

                            where N.TownName.StartsWith(Prefix)

                            select new { N.TownName });

            return Json(CityName, JsonRequestBehavior.AllowGet);

         

        }