在MVC应用中实现Chosen下拉列表的3字符触发自动完成搜索

@model YourNamespace.YourViewModel // 假设您的模型包含 IdPersona 属性

<div class="form-group">
    <label for="nombrepersona">选择人员:</label>
    @Html.DropDownListFor(x => x.IdPersona, Enumerable.Empty<SelectListItem>(), 
                          "Seleccione...", // 占位符文本
                          new { 
                              @class = "form-control chosen-select", 
                              style = "width:100%", 
                              id = "nombrepersona" 
                          })
</div>

@section scripts {
    <script src="~/Scripts/jquery-3.x.x.min.js"></script>
    <script src="~/Scripts/chosen.jquery.min.js"></script>
    <link href="~/Content/chosen.min.css" rel="stylesheet" />

    <script type="text/javascript">
        $(document).ready(function () {
            // 初始化Chosen插件
            $("#nombrepersona").chosen({
                no_results_text: "没有找到匹配项",
                width: "100%",
                // 启用实时搜索
                allow_single_deselect: true,
                disable_search_threshold: 10 // 只有当选项数量超过10时才显示搜索框
            });

            // ... 后续的JavaScript搜索逻辑将在这里添加 ...
        });
    </script>
}

$(document).ready(function () {
    $("#nombrepersona").chosen({
        no_results_text: "没有找到匹配项",
        width: "100%",
        allow_single_deselect: true,
        disable_search_threshold: 10
    });

    var searchTimer;
    // 监听Chosen生成的搜索输入框的keyup事件
    $('#nombrepersona_chosen').on('keyup', '.chosen-search input', function () {
        var searchTerm = $(this).val();

        // 清除之前的定时器，防止频繁请求
        clearTimeout(searchTimer);

        // 如果搜索词长度达到3个字符，则设置定时器进行搜索
        if (searchTerm.length >= 3) {
            searchTimer = setTimeout(function () {
                performSearch(searchTerm);
            }, 500); // 500毫秒（0.5秒）后执行搜索
        } else if (searchTerm.length === 0) {
            // 如果搜索词被清空，则清除下拉列表并刷新Chosen
            $('#nombrepersona').empty().append($('<option></option>').val('').text('Seleccione...'));
            $('#nombrepersona').trigger('chosen:updated');
        }
    });

    function performSearch(searchTerm) {
        $.ajax({
            url: "@Url.Action("AutocompleteSearch", "Home")", // 注意这里的URL，需要替换为您的控制器和Action
            type: "GET",
            data: { searchTerm: searchTerm },
            success: function (data) {
                var dropdown = $("#nombrepersona");
                dropdown.empty(); // 清空当前下拉列表选项

                // 添加默认占位符
                dropdown.append($('<option></option>').val('').text('Seleccione...'));

                if (data.length > 0) {
                    $.each(data, function (index, item) {
                        // 假设后端返回的数据项包含 Id 和 Name 属性
                        dropdown.append($('<option></option>').val(item.Id).text(item.Name));
                    });
                } else {
                    dropdown.append($('<option></option>').val('').text("没有找到匹配项"));
                }

                // 通知Chosen.js更新其显示
                dropdown.trigger("chosen:updated");
            },
            error: function (xhr, status, error) {
                console.error("搜索失败: " + status + " - " + error);
                // 可以在这里添加用户友好的错误提示
            }
        });
    }
});

using System.Linq;
using System.Web.Mvc;
using System.Collections.Generic;

namespace YourNamespace.Controllers
{
    public class HomeController : Controller
    {
        // 假设这是一个简单的数据模型
        public class Person
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }

        // 模拟一个包含大量数据的列表
        private static readonly List<Person> AllPeople = new List<Person>();

        static HomeController()
        {
            // 模拟百万级数据，实际应用中数据来自数据库
            for (int i = 1; i <= 1000000; i++)
            {
                AllPeople.Add(new Person { Id = i, Name = $"Person Name {i:D6}" });
            }
            // 添加一些特殊名称以便测试
            AllPeople.Add(new Person { Id = 1000001, Name = "John Doe" });
            AllPeople.Add(new Person { Id = 1000002, Name = "Jane Smith" });
            AllPeople.Add(new Person { Id = 1000003, Name = "Robert Johnson" });
            AllPeople.Add(new Person { Id = 1000004, Name = "Alice Brown" });
            AllPeople.Add(new Person { Id = 1000005, Name = "Charlie Green" });
        }

        [HttpGet]
        public ActionResult AutocompleteSearch(string searchTerm)
        {
            if (string.IsNullOrWhiteSpace(searchTerm) || searchTerm.Length < 3)
            {
                // 如果搜索词无效或不足3个字符，返回空结果
                return Json(new List<Person>(), JsonRequestBehavior.AllowGet);
            }

            // 模拟从数据库中查询数据
            // 在实际应用中，这里会是EF Core、Dapper或其他ORM的查询语句
            // 并且会考虑性能优化，如使用 StartsWith 或 Contains，并进行分页
            var results = AllPeople
                .Where(p => p.Name.IndexOf(searchTerm, System.StringComparison.OrdinalIgnoreCase) >= 0)
                .Take(50) // 限制返回结果的数量，避免一次性返回过多数据
                .ToList();

            return Json(results, JsonRequestBehavior.AllowGet);
        }

        // 其他控制器Action...
    }
}