Autocomplete textbox in mvc 3.0

create controller with name MvcAutocomplete

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Autocomplete.Models;
using newauto.Models;
using newauto.Controllers;

namespace Autocomplete.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/
        CountryEntities _entites = new CountryEntities();
        public ActionResult Index()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult Autocomplete(string term)
        {
            var data = (from x in _entites.countries
                        where x.CountryName.Contains(term)
                        select new City
                        {
                            Key = x.pkCountryId,
                            Value = x.CountryName
                        }).ToList();
            return Json(data, JsonRequestBehavior.AllowGet);
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public JsonResult GetDetail(int id)
        {
            DemoModel model = new DemoModel();
           // select data by id here display static data;
            if (id == 0)
            {
                model.id = 1;
                model.name = "Yogesh Tyagi";
                model.mobile = "9460516787";

            }
            else {
                model.id = 2;
                model.name = "Pratham Tyagi";
                model.mobile = "9460516787";
          
            }

            return Json(model);
          
        }

    }
}

-------------------------------------------------------------------------------------

@{
    ViewBag.Title = "Index";
}



<script src="../../Scripts/jquery-ui-1.8.20.js" type="text/javascript"></script>

<h2>Index</h2>
  @Html.Label("Enter Your name")
                @Html.TextBox("PassId")
<div id="VisitorDetail">
                    <label>Id</label><div id="Id"></div>
                    <label>Name</label><div id="Name"></div>
                    <label>Mobile</label><div id="Mobile"></div>
  </div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#VisitorDetail').hide();
    });
    $("#PassId").autocomplete({
        source: function (request, response) {
            var customer = new Array();
            $.ajax({
                async: false,
                cache: false,
                type: "POST",
                url: "@(Url.Action("Autocomplete", "Home"))",
                data: { "term": request.term },
                success: function (data)
                {
                if(data.length==0)
                {
                    $('#VisitorDetail').hide();
                alert('No Records Found');
                }
                else
                {
                 $('#VisitorDetail').show();
                alert('No Records Found'+'1');
                    for (var i = 0; i < data.length ; i++)
                     {
                 
                        customer[i] = { label: data[i].Value, Id: data[i].Key };
                      }
                    }
                }
            });
            response(customer);
        },
         select: function (event, ui) {
             //fill selected customer details on form
             $.ajax({
                 cache: false,
                 async: false,
                 type: "POST",
                 url: "@(Url.Action("GetDetail", "Home"))",
                data: { "id": ui.item.Id },

                success: function (data) {
                    $('#VisitorDetail').show();
                    $("#Id").html(data.id)
                    $("#Name").html(data.name)
                    $("#Mobile").html(data.mobile)
                    action = data.Action;
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert('Failed to retrieve states.');
                }
            });
        }
     });

</script>