如何实现AutoComplete搜索提交按钮在Index页面展示结果？

看起来你遇到的问题是：AutoComplete自动补全功能正常，但点击提交按钮后，页面没法根据输入/选中的邮箱过滤表格里的邮件列表。我帮你梳理下问题根源，然后给出具体的修复方案：

问题分析 #

你的前端表单通过Html.BeginForm("Index", "User", FormMethod.Post)提交POST请求到User/Index，但你的Controller里只有处理GET请求的Index方法，没有接收POST参数并过滤数据的逻辑，所以提交后页面还是返回全部邮件数据，不会展示匹配的结果。

另外，你的AutoComplete的select事件只更新了隐藏域hfEmail的值，没有同步更新输入框txtEmail的显示内容（虽然不影响提交，但用户体验会更好）。

修复步骤 #

1. 添加处理POST请求的Index方法（后端） #

在你的UserController中添加一个带[HttpPost]特性的Index方法，用来接收表单提交的参数并过滤数据：

[HttpPost]
public ActionResult Index(string EmailName, string Email_ID)
{
    var dbContext = new DataContext();
    var usersQuery = dbContext.PX.AsQueryable();

    // 根据提交的参数过滤数据
    if (!string.IsNullOrEmpty(Email_ID))
    {
        // 优先使用隐藏域中选中的邮箱ID（精确匹配）
        usersQuery = usersQuery.Where(t => t.Email_ID == Email_ID);
    }
    else if (!string.IsNullOrEmpty(EmailName))
    {
        // 如果没有选中自动补全选项，使用输入框的内容进行模糊匹配
        usersQuery = usersQuery.Where(t => t.Email_ID.Contains(EmailName));
    }

    // 转换为视图模型并排序
    var filteredUsers = usersQuery.Select(t => new user { Email = t.Email_ID })
                                  .OrderByDescending(t => t.Email)
                                  .ToList();

    return View(filteredUsers);
}

2. 优化AutoComplete的select事件（前端） #

在Index.cshtml的autocomplete脚本中，添加一行代码同步更新输入框的显示内容，提升用户体验：

select: function (e, i) {
    $("#hfEmail").val(i.item.val);
    $("#txtEmail").val(i.item.label); // 新增：同步输入框显示选中的邮箱
},

3. 验证表单提交逻辑 #

你的表单结构已经正确包裹了输入框、隐藏域和提交按钮，这部分无需修改，确保提交时能把EmailName和Email_ID参数传递到后端即可。

效果说明 #

修改完成后，当你：

• 在输入框输入内容并选择自动补全选项，点击提交按钮，会根据选中的邮箱ID精确过滤表格数据
• 直接输入邮箱内容（未选择自动补全），点击提交按钮，会根据输入内容模糊匹配表格数据

这样就能实现点击提交按钮后，在Index页面展示匹配的邮件列表了。

内容的提问来源于stack exchange，提问作者HellorhighWater