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

在我的控制器中，我写了以下代码：

     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>

Jquery自动完成建议未显示在文本框下，并显示在ASP.NET MVC页面底部

1 个答案: