MVC 自动完成

Question

根据我的研究，我尝试了 MVC C# 的自动完成代码，它可以工作。代码如下：

对于脚本：

$(document).ready(function () {
    $("#Users").autocomplete({
        source: function(request,response) {
            $.ajax({
                url: "/Home/AutoCompleteUsers",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.Name, value: item.ID };
                    }))

                }
            })
        },
        messages: {
            noResults: "", results: ""
        }
    });
})

观点：

Enter Name: @Html.TextBox("Employees")
<input type="submit" id="GetEmployees" value="Submit"/>

在控制器中：

public JsonResult AutoCompleteUsers(string term)
{
    var result = (from r in db.Users
    where r.Name.ToLower().Contains(term.ToLower())
    select new { r.Name, r.ID }).Distinct();
    return Json(result, JsonRequestBehavior.AllowGet);
}

我的问题是：

我想知道如何获取对应的ID并将其放入表单的输入字段中，以便将ID包含在提交的表单中。非常感谢任何帮助。

Answer 1

您需要使用自动完成的select 属性并告诉它当用户从自动完成中选择一个项目时要做什么：

select: function (event, ui) {
        $("#Employees").val(ui.item.value); //setting id in Employees TextBox

    }

更好的是在 TextBox 中设置员工姓名并在隐藏字段中设置 id 并在表单发布时从隐藏字段中检索 id：

Enter Name: @Html.TextBox("Employees")
<input id="EmployeeId" type="hidden"/>
<input type="submit" id="GetEmployees" value="Submit"/>

然后：

select: function (event, ui) {
            $("#Employees").val(ui.item.label); 
            $("#EmployeeId").val(ui.item.value);

        }

选择（事件，用户界面）：

从菜单中选择项目时触发。默认操作是将文本字段的值替换为所选项目的值。

Answer 2

@Html.Hidden("EmployeeId")
$(document).ready(function () {
$("#Users").autocomplete({
    source: function(request,response) {
        $.ajax({
            url: "/Home/AutoCompleteUsers",
            type: "POST",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.Name, value: item.ID };
                }))

            }
        })
    },
    select: function (event, ui) {
      event.preventdefault().
      $("#EmployeeId").val(ui.item.value);
      $("#Employees").val(ui.item.label);
    },
    messages: {
        noResults: "", results: ""
    }
});
})