Ajax 自动完成从数据库中填充搜索框

Question

我看到很多关于使用自动完成创建搜索框的问题。我没有看到任何解决我遇到的问题的方法，即我的控制器操作将实际的 json 数据作为页面传递，而不是在页面上传递。我正在使用 ASP.NET Core，并且像大多数建议一样，我正在尝试 return Json 来自控制器操作。这是我的控制器：

    [HttpPost]
    [Route("content")]
    public JsonResult Search(string body)
    {
        var returnObj = _context.Posts.Where(x => x.Body.Contains(body.ToUpperInvariant())
            || x.Title.Contains(body.ToUpperInvariant()))
            .Select(x => new { id = x.Id, title = x.Title, body = x.Body });
        return Json(returnObj);
    }

这是我的 cshtml 和 ajax：

    <form class="form-inline" method="post">
        <input type="hidden" asp-action="Post.Id" />
        <input type="text" id="Title" placeholder="Search" class="form-control" name="body" />
        <button class="btn btn-outline-info" asp-controller="Posts" asp-action="Search"></button>
    </form>

    <script>
        $(document).ready(function) {
            $("#Title").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "/posts/content",
                        type":"POST",
                        dataType: "json",
                        data: { body: request.term },
                        success: function (data) {
                           response($.map(data, function (val, item)) {
                             return { label: val.Title, val: Title}
                           }));
                        }
                     });
                   }
                });
             });
    </script>

我与 ajax 一起使用的表单位于 Layout.cshtml 文件中。当我离开时

    asp-controller="Posts" asp-action="Search"

在我的<button ... ></button> 标签中，我可以点击我的控制器。当我删除它时，我不能。我假设 ajax 将允许我的表单点击控制器而不是标签助手。

我的目标是让数据在我键入时填充搜索栏，其中来自数据库的数据估计用户键入的内容。但相反，我得到了一个包含 json 数据的新页面。就像你在没有 ajax 的情况下只使用 return Json(""); 时得到的一样。但我做错了吗？为什么我的 ajax 没有按预期触发？

Answer 1

你可以像下面这样改变你的ajax：

$(document).ready(function () {
        $("#Title").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/posts/content",
                    type: "POST",
                    dataType: "json",
                    data: { body: request.term },
                    success: function (data) {
                        response($.map(data, function (val,item) {
                            return {
                                label: val.title,
                                value: val.id
                            };
                        }));
                    }
                });
            }
        });
    });

测试结果：