Couldn't able find error autocomplete in mvc

Question

I am new to both MVC and JQUERY. Facing lot of problems with those to analyse... I want to implement autocomplete for two textboxes. But unable to implement it. I could not able find the issue also to rectify that. Not Even fire break point to the method in controller... please help me...!

In View

    <div id="srh-city">
                    <div style="margin-right: 16px; float: left; display: inline">
                        <label>
                            LEAVING FROM</label>
                        <div>

                            @Html.TextBox("txtFrom", "", new { @class = "main-text from", placeholder = "Enter From City", required = "required ", tabindex = 1 })
                            <br />

                        </div>
                    </div>
                    <div style="float: left">
                        <label>
                            GOING TO</label><div>

                                @Html.TextBox("txtto", "", new { @class = "main-text to", placeholder = "Enter To City", required = "required ", tabindex = 2 })
                                <br />

                            </div>
                    </div>
                </div>

In Controller

 public JsonResult AutoComplete(string qry)
    {
        Dimensions objDimensions = new Dimensions();
        TYSLayer.TYService.City[] cities = objDimensions.GetFromCities();

        var items = from p in cities
                    select p.CityName;

        JavaScriptSerializer jss = new JavaScriptSerializer();


        var namelist = items.Where(n => n.ToLower().StartsWith(qry.ToLower()));

        return Json(namelist, JsonRequestBehavior.AllowGet);
    }

JQuery

$("#txtFrom").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Home/AutoComplete", type: "POST", dataType: "json",
            data: { qry: request.term },

            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.label, value: item.label, id: item.id };
                }));
            },
            select: function (event, ui) {
                //update the jQuery selector here to your target hidden field
                $("#txtFrom").val(ui.item.id);
            }
        });
    },
    minLength: 1
});