实现基于Chosen.js和MVC的3字符触发式下拉列表自动补全搜索

@model YourNamespace.YourViewModel // 假设您的模型
@{
    ViewBag.Title = "自动补全搜索示例";
}

<h2>自动补全搜索</h2>

<div>
    <label for="nombrepersona">选择人员:</label>
    @Html.DropDownListFor(x => x.IdPersona, Enumerable.Empty<SelectListItem>(), 
                          "Seleccione...", // 默认提示
                          new { 
                              @class = "form-control chosen-select", 
                              style = "width:100%", 
                              id = "nombrepersona" // 确保有唯一ID
                          })
</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>
        $(document).ready(function () {
            // 初始化Chosen.js
            $('#nombrepersona').chosen({
                no_results_text: "未找到结果",
                allow_single_deselect: true,
                // 其他Chosen.js配置，例如：
                // enable_split_word_search: false,
                // search_contains: true
            });

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

$(document).ready(function () {
    // ... Chosen.js 初始化代码 ...

    // 找到Chosen.js生成的搜索输入框
    // 通常，Chosen会在原始select的容器内创建一个input元素
    // 假设原始select的ID是 'nombrepersona'
    var chosenSearchInput = $('#nombrepersona_chosen').find('.chosen-search-input'); 
    // 更通用的选择器可能是：$('.chosen-container .chosen-search input');

    // 用于防抖的计时器
    var searchTimer;
    const DEBOUNCE_DELAY = 300; // 300毫秒延迟

    chosenSearchInput.on("keyup", function () {
        var searchTerm = $(this).val();

        // 清除之前的计时器，避免频繁发送请求
        clearTimeout(searchTimer);

        if (searchTerm.length >= 3) {
            // 当输入达到3个字符时，设置一个短延迟后执行搜索
            searchTimer = setTimeout(function() {
                // 显示加载状态（可选）
                $('#nombrepersona').next('.chosen-container').find('.chosen-results').prepend('<li class="no-results">正在搜索...</li>');
                $('#nombrepersona').next('.chosen-container').find('.no-results').show();

                $.ajax({
                    url: "@Url.Action("AutocompleteSearch", "Home")", // 替换为您的控制器和Action
                    type: "GET",
                    data: { searchTerm: searchTerm },
                    success: function (data) {
                        var dropdown = $("#nombrepersona");
                        dropdown.empty(); // 清空现有选项

                        if (data && data.length > 0) {
                            $.each(data, function (index, item) {
                                // 假设后端返回的数据格式为 { Id: "value", Name: "text" }
                                dropdown.append($('<option></option>').val(item.Id).text(item.Name));
                            });
                        } else {
                            dropdown.append($('<option></option>').text("未找到结果"));
                        }

                        // 通知Chosen.js更新其显示
                        dropdown.trigger("chosen:updated");

                        // 移除加载状态
                        $('#nombrepersona').next('.chosen-container').find('.no-results').remove();
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        console.error("AJAX请求失败: " + textStatus, errorThrown);
                        var dropdown = $("#nombrepersona");
                        dropdown.empty().append($('<option></option>').text("加载失败"));
                        dropdown.trigger("chosen:updated");
                        $('#nombrepersona').next('.chosen-container').find('.no-results').remove();
                    }
                });
            }, DEBOUNCE_DELAY); // 防抖延迟
        } else if (searchTerm.length === 0) {
            // 当搜索框清空时，也清空下拉列表并更新Chosen
            var dropdown = $("#nombrepersona");
            dropdown.empty(); // 清空所有选项
            dropdown.append($('<option></option>').text("Seleccione...")); // 添加默认选项
            dropdown.trigger("chosen:updated");
            $('#nombrepersona').next('.chosen-container').find('.no-results').remove();
        } else {
            // 输入字符不足3个时，可以显示提示或不做处理
            $('#nombrepersona').next('.chosen-container').find('.no-results').remove();
            $('#nombrepersona').next('.chosen-container').find('.chosen-results').prepend('<li class="no-results">请输入至少3个字符进行搜索...</li>');
            $('#nombrepersona').next('.chosen-container').find('.no-results').show();
        }
    });
});

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

namespace YourNamespace.Controllers
{
    public class HomeController : Controller
    {
        // 假设这是一个简单的数据模型，实际应用中会是数据库实体
        public class Person
        {
            public int Id { get; set; }
            public string Name { get; set; }
        }

        // 模拟一个大数据集
        private static List<Person> _allPeople = new List<Person>();

        static HomeController()
        {
            // 模拟100万条数据
            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 = "Peter Jones" });
            _allPeople.Add(new Person { Id = 1000004, Name = "Alice Brown" });
            _allPeople.Add(new Person { Id = 1000005, Name = "Bob White" });
        }


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

            // 模拟数据库查询，根据searchTerm过滤数据
            // 在实际应用中，这里会调用您的数据访问层（Repository/Service）
            var results = _allPeople
                            .Where(p => p.Name.IndexOf(searchTerm, System.StringComparison.OrdinalIgnoreCase) >= 0)
                            .Take(50) // 限制返回结果的数量，避免一次性返回过多数据
                            .Select(p => new { Id = p.Id, Name = p.Name }) // 匿名类型，只返回前端需要的数据
                            .ToList();

            // 返回JSON格式的数据
            return Json(results, JsonRequestBehavior.AllowGet);
        }

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