javascript - Jquery 自动完成建议未显示在文本框下，而是显示在 ASP.NET MVC 中的页面底部

Question

我的主页顶部的 ASP.Net MVC 应用程序中有一个文本框。

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

我正在使用 Jquery 来获取建议:

     $(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: ""
        }
    });
})

在我的 Controller 中，我编写了以下代码:

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

在执行我的应用程序时，它会显示建议，但它不是在文本框下方，而是显示在我的页面页脚之后。

Answer 1

为了使上述代码正常工作，需要引用以下脚本和css文件:

<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>