ASP.NET Core MVC实现Select下拉列表动态搜索用户名功能

整个实现分三步完成，分别修改后端接口、前端视图元素、前端交互逻辑：

第一步：修改后端控制器代码 #

首先新增专门给Ajax调用的搜索接口，同时调整原有Login方法的初始加载逻辑，避免页面首次打开就加载全量用户浪费资源。

public IActionResult Login(string ReturnUrl = "/")
{
    LoginModel objLoginModel = new LoginModel();
    objLoginModel.ReturnUrl = ReturnUrl;
    // 初始不加载全量用户，等待用户输入关键词后再搜索
    ViewBag.Users = new SelectList(Enumerable.Empty<SelectListItem>());
    return View(objLoginModel);
}

// 新增Ajax用户搜索接口
public IActionResult SearchUsers(string keyword)
{
    // 关键词为空时直接返回空列表，不查库
    if (string.IsNullOrWhiteSpace(keyword))
    {
        return Json(new List<object>());
    }
    // 参数化调用存储过程，禁止直接拼接SQL防注入
    // 需提前修改GetUsers存储过程，新增@Keyword入参，查询逻辑加 WHERE UserId LIKE '%'+@Keyword+'%'
    var searchResult = _context.GetUsers(
        "execute GetUsers @Keyword",
        new SqlParameter("@Keyword", keyword.Trim())
    ).ToList();
    // 转成下拉框需要的格式返回
    return Json(searchResult.Select(u => new { value = u.UserId, text = u.UserId }));
}

第二步：修改前端视图元素 #

原有代码中输入框和下拉框缺少对应id，JS无法选中元素，先给两个元素补上id，同时关闭输入框的默认自动完成避免干扰：

• 用户名输入框修改为：

  <input asp-for="UserId" class="form-control" id="search_id" autocomplete="off" />
  

• 右侧用户选择下拉框修改为：

  <select id="userSelectList" asp-for="UserId" asp-items="ViewBag.Users" size="6" multiple class="form-control"></select>
  

第三步：完善前端JS交互逻辑 #

替换原有预留的script块，加入防抖逻辑减少无效请求，同时实现下拉选项点击填充功能：

@section Scripts {
<script>
// 防抖定时器，避免用户连续输入时频繁发请求
let searchDebounceTimer = null;
$("#search_id").keyup(function () {
    clearTimeout(searchDebounceTimer);
    const inputKeyword = $(this).val().trim();
    const $userSelect = $("#userSelectList");

    // 输入为空时直接清空下拉列表
    if (!inputKeyword) {
        $userSelect.empty();
        return;
    }

    // 延迟300ms发请求，平衡响应速度和服务器压力
    searchDebounceTimer = setTimeout(() => {
        $.ajax({
            url: '@Url.Action("SearchUsers", "替换为你的实际控制器名，比如Account")',
            type: 'GET',
            data: { keyword: inputKeyword },
            success: function (userList) {
                $userSelect.empty();
                // 追加搜索结果到下拉框
                userList.forEach(user => {
                    $userSelect.append(`<option value="${user.value}">${user.text}</option>`);
                });
            },
            error: function () {
                console.log("用户搜索接口请求异常");
            }
        });
    }, 300);
});

// 点击下拉选项时自动填充用户名到输入框
$("#userSelectList").on("click", "option", function () {
    const selectedUserId = $(this).val();
    $("#search_id").val(selectedUserId);
    // 如果需要点击即选中选项用于表单提交，放开下面这行注释即可
    // $(this).prop("selected", true);
});
</script>
}

注意事项 #

• 存储过程GetUsers需要新增@Keyword入参，通过LIKE模糊匹配UserId字段，必须用参数化方式传值，禁止直接把用户输入拼接到SQL语句中，避免SQL注入风险。
• 如果你封装的_context.GetUsers方法不支持传入SqlParameter参数，换成你项目中常用的参数化执行存储过程的写法即可。
• 300ms的防抖延迟可以根据实际需求调整，数值越大请求频次越低、服务器压力越小，但输入响应的即时感会稍弱。
• JS代码里的控制器名一定要替换成你项目中登录功能所在的控制器实际名称，否则Ajax会报404错误。

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