ASP.NET Core多输入自动补全问题：如何绑定邮箱、部门字段

要实现选中姓名后同时填充城市、邮箱、部门字段，只需两步修改：

1. 修改后端接口，返回完整所需字段 #

原接口仅返回姓名和城市，现在需要把邮箱、部门也包含在返回对象中：

[HttpPost]
public JsonResult AutoCompletePeoples(string prefix)
{
    var pessoas = (from pessoa in _context.Pessoas
                   where pessoa.NamePeople.StartsWith(prefix)
                   select new
                   {
                       label = pessoa.NamePeople, // 自动补全显示的文本
                       City = pessoa.City,
                       Email = pessoa.Email,
                       Department = pessoa.Department
                   }).ToList();

    return Json(pessoas);
}

2. 修改前端select事件，赋值所有字段 #

在自动补全选中项时，把返回的邮箱、部门字段分别赋值到对应输入框（确保页面存在txtEmail和txtDepartment输入框）：

$(function () {
    $("#txtNomeVisitante").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: '/Visitas/AutoCompletePeoples/',
                data: { "prefix": request.term },
                type: "POST",
                success: function (data) {
                    response($.map(data, function (item) {
                        return item;
                    }))
                },
                error: function (response) {
                    alert(response.responseText);
                },
                failure: function (response) {
                    alert(response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#txtCity").val(i.item.City);
            $("#txtEmail").val(i.item.Email); // 绑定邮箱字段
            $("#txtDepartment").val(i.item.Department); // 绑定部门字段
        },
        minLength: 1
    });
});

注意事项 #

• 确保Pessoas实体类包含Email和Department字段，字段名需与代码保持一致
• 页面需添加对应输入框示例：

  <input type="text" id="txtEmail" placeholder="邮箱" />
  <input type="text" id="txtDepartment" placeholder="部门" />
  

内容的提问来源于stack exchange，提问作者Tiago Procópio