javascript - 来自数据库 MVC 5 的自动完成文本框

Question

我有一个文本框字段，它从数据库的 Angular 色表中选择数据我需要这个文本框为字段创建一个带有起始字符的自动完成。

示例:

MVC代码:

This JsonResult in the UsersControl

 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代码:

This the JS and the 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

这里你的 Controller 端方法看起来不错。

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

    $("#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) {

        }
    });