从数据库MVC 5中自动完成文本框

Question

我有我的textboxfor字段，用于从数据库中选择角色表中的数据 我需要这个textboxfor字段使用起始字符进行自动完成。

示例：

MVC代码：

  

UsersControl中的这个JsonResult

 public JsonResult GetRoles(string Prefix)
    {
        var RoleListVal = db.Roles.Where(r => r.Deleted == false)
            .Where(r => r.Name.ToUpper().StartsWith(Prefix))
            .Select(r => new { Name = r.Name, ID = r.RoleID }).Distinct().ToList();
        return Json(RoleListVal, JsonRequestBehavior.AllowGet);
    }

cshtml代码：

  

这是JS和HTML5 TextBoxFor：

$("#keywords-manual").autocomplete({
        source: "/Users/GetRoles",
        minLength: 1
    })

<div class="form-inline">
            @Html.Label("Role :")
            @Html.TextBoxFor(model => model.Roles.FirstOrDefault().Name, new { @class = "form-control", @id = "keywords-manual" })
</div>

我不知道为什么不工作！

Answer 1

这里你的控制器方法看起来不错。

但问题是你在调用方法时。

    $("#keywords-manual").autocomplete({
        source: function (request, response) {
            $.ajax(
                    {
                        type: "POST",
                        url: '@Url.Action("GetRoles","Users")',
                        data: { Prefix: $('#keywords-manual').val() },
                        dataType: "json",
                        success: function (data) {
                            response($.map(data, function (item) {
                                return {
                                    value: item.Name,
                                    description: item
                                }
                            }))
                        },
                        error: function (error) {
                            console.log(error);
                        }
                    });
        },
        minLength: 1,
        select: function (event, ui) {

        }
    });

Answer 2

这是您配置自动完成插件的方式

在HTML端：

FORCE INDEX

在控制器端：

$(function () {
            $("#keywords-manual").autocomplete({
                source: "@Url.Action("GetRoles","Users")",
                minLength: 1
            })
                   });