jQuery自动完成建议未显示在文本框下方，也不显示在ASP.NET MVC页面底部

Question

I have a textbox in ASP.Net MVC application at top of my Home page.

    @Html.TextBox("place", Model.place,Model.place, new {id="place", @class = "form-control", @placeholder = "Search by Location" })

I am using Jquery to get suggestions:

     $(document).ready(function () {
    $("#place").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Search/AutoCompleteSearch",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.SearchTerm, value: item.SearchTerm };
                    }))

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

In my controller i have written the following code:

     public JsonResult AutoCompleteSearch(string term)
    {
        var searchResults = frequentsearchtermService.GetTerms(term);
        return Json(searchResults, JsonRequestBehavior.AllowGet);
    }

While executing my application it is showing suggestions, but instead of just below the text box, it shows after the footer of my page.

Answer 1

for proper working of the above code, need to give reference to the following script and css files:

<link href="~/Content/css/jquery-ui.css" rel="stylesheet" />
<script src="~/Content/js/jquery-1.10.2.js"></script>
<script src="~/Content/js/jquery-ui.js"></script>