Javascript MVC自动完成

基于我的研究，我尝试了一个MVC的自动完成代码，它是有效的。代码如下：

对于脚本：

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

鉴于：

我的问题是:

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

您需要使用autocomplete属性，并告诉它当用户从autocomplete中选择一个项目时该怎么做：

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

    }

更好的做法是在文本框中设置员工姓名，在隐藏字段中设置id，并在表单post中从隐藏字段中检索id：

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

选择事件，用户界面： 从菜单中选择项目时触发。默认操作是用选定项的值替换文本字段的值

---

您有文本框的模型属性吗？我试图将其发送到表单中，并将员工传递给将显示相应ID的操作以显示ID，但值为0。我的操作接受Employees作为参数int，因为它的值是ID。我将它查询到表并循环它。我使用Viewbag显示特定ID的名称并返回到视图。问题是Employees的值为0。请参阅编辑后的答案。确保在控制器操作中正确映射EmployeeId我已经得到了它，但是每当我从文本框字段中选择一个时，它将被Employee ID字段中的ID替换。为什么？我已经得到了答案，我只是加了一句：event.preventdefault。。谢谢你。它在EmployeeID中显示每个姓名的对应ID，但一旦我选择了列表中的一个，textbox字段将被ID替换。为什么?你说的不明白吗?

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

    }

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);

        }

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