MVC中用Chosen插件实现下拉框输入3字符后自动补全搜索

你当前的核心问题是监听了错误的DOM元素，Chosen插件会将原select转换为自定义DOM结构，实际的搜索输入框是容器内部的.chosen-search-input，而非容器本身。同时，百万级数据绝对不能一次性加载，必须结合远程按需搜索来保障性能，以下是完整实现方案：

1. 保留原Razor代码（后续通过JS动态更新选项） #

@Html.DropDownListFor(x => x.IdPersona, Enumerable.Empty<SelectListItem>(), "Seleccione...", new { @class = "form-control chosen-select", style = "width:100%", id = "nombrepersona"})

2. 改进JS代码（正确监听+防抖搜索+更新Chosen） #

// 初始化Chosen基础配置
$("#nombrepersona").chosen({
    no_results_text: "未找到匹配项",
    search_contains: true, // 开启模糊匹配
    width: "100%"
});

// 防抖函数：避免频繁触发搜索请求，降低服务器压力
function debounce(func, delay) {
    let timer;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(context, args), delay);
    };
}

// 监听Chosen的实际搜索输入框
$("#nombrepersona_chosen .chosen-search-input").on("keyup", debounce(function() {
    const inputText = $(this).val().trim();
    if (inputText.length >= 3) {
        RealizarBusqueda(inputText);
    } else {
        // 输入不足3个字符时重置选项
        $("#nombrepersona").empty().append('<option value="">Seleccione...</option>');
        $("#nombrepersona").trigger("chosen:updated");
    }
}, 300)); // 300ms防抖延迟，可按需调整

// 调用后台接口获取数据并更新Chosen选项
function RealizarBusqueda(keyword) {
    $.ajax({
        url: "/Persona/BuscarPersonas", // 替换为你的后台接口地址
        type: "GET",
        data: { keyword: keyword },
        success: function(data) {
            $("#nombrepersona").empty();
            $("#nombrepersona").append('<option value="">Seleccione...</option>');
            // 渲染返回的匹配项
            $.each(data, function(index, item) {
                $("#nombrepersona").append(`<option value="${item.Value}">${item.Text}</option>`);
            });
            // 通知Chosen刷新选项
            $("#nombrepersona").trigger("chosen:updated");
        },
        error: function() {
            alert("搜索失败，请稍后重试");
        }
    });
}

3. 后台MVC Action实现（按需返回匹配数据） #

public class PersonaController : Controller
{
    private readonly IPersonaRepository _personaRepo;

    public PersonaController(IPersonaRepository personaRepo)
    {
        _personaRepo = personaRepo;
    }

    public JsonResult BuscarPersonas(string keyword)
    {
        // 仅返回前20条匹配数据（限制数量避免前端渲染卡顿）
        var personas = _personaRepo.BuscarPorNombre(keyword)
                                   .Take(20)
                                   .Select(p => new SelectListItem
                                   {
                                       Value = p.IdPersona.ToString(),
                                       Text = $"{p.Nombre} {p.Apellido}"
                                   })
                                   .ToList();

        return Json(personas, JsonRequestBehavior.AllowGet);
    }
}

关键优化点 #

• 监听正确元素：必须绑定Chosen生成的.chosen-search-input输入框，而非外层容器。
• 防抖处理：避免用户每输入一个字符就发起请求，减少服务器负载。
• 数据量限制：后台只返回少量匹配结果（比如20条），避免前端渲染大量DOM节点导致卡顿。
• 强制更新Chosen：每次修改select选项后，必须触发chosen:updated事件，否则Chosen不会刷新显示。

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