在ASP.NET MVC中实现基于Chosen插件的3字符自动补全搜索

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

<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%",
                // 如果希望在搜索时显示加载动画，可以配置
                // disable_search_threshold: 10 // 当选项少于10个时不显示搜索框
            });

            // 获取Chosen插件生成的搜索输入框
            // Chosen插件会将其搜索输入框放置在 .chosen-search 内部
            var chosenSearchInput = $('#nombrepersona_chosen').find('.chosen-search input[type="text"]');
            var ajaxTimer; // 用于防抖的计时器

            chosenSearchInput.on("keyup", function () {
                var searchTerm = $(this).val();
                var dropdown = $("#nombrepersona"); // 原始的select元素

                // 清除之前的计时器，实现防抖
                clearTimeout(ajaxTimer);

                if (searchTerm.length >= 3) {
                    // 设置一个延迟，避免用户快速输入时频繁发送请求
                    ajaxTimer = setTimeout(function () {
                        $.ajax({
                            url: "@Url.Action("AutocompleteSearch", "Home")", // 指向您的控制器动作
                            type: "GET",
                            data: { searchTerm: searchTerm },
                            success: function (data) {
                                dropdown.empty(); // 清空当前所有选项

                                if (data && data.length > 0) {
                                    // 添加默认选项（可选）
                                    // dropdown.append($('<option></option>').val('').text('请选择...'));
                                    $.each(data, function (index, item) {
                                        dropdown.append($('<option></option>').val(item.Id).text(item.Name));
                                    });
                                } else {
                                    dropdown.append($('<option></option>').val('').text('无结果'));
                                }

                                // 关键：通知Chosen插件更新其DOM以反映新的选项
                                dropdown.trigger("chosen:updated");
                            },
                            error: function (xhr, status, error) {
                                console.error("AJAX Error: " + status + " - " + error);
                                dropdown.empty();
                                dropdown.append($('<option></option>').val('').text('加载失败，请重试'));
                                dropdown.trigger("chosen:updated");
                            }
                        });
                    }, 300); // 300毫秒延迟，可根据需要调整
                } else if (searchTerm.length > 0 && searchTerm.length < 3) {
                    // 提示用户输入更多字符
                    dropdown.empty();
                    dropdown.append($('<option></option>').val('').text('输入至少3个字符进行搜索'));
                    dropdown.trigger("chosen:updated");
                } else if (searchTerm.length === 0) {
                    // 当搜索框清空时，恢复初始状态
                    dropdown.empty();
                    dropdown.append($('<option></option>').val('').text('Seleccione...')); // 恢复初始占位符
                    dropdown.trigger("chosen:updated");
                }
            });
        });
    </script>
}

// Models/DropdownItem.cs
public class DropdownItem
{
    public string Id { get; set; }
    public string Name { get; set; }
}

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using YourNamespace.Models; // 引入您的模型命名空间

public class HomeController : Controller
{
    // 模拟一个大型数据集
    private static List<DropdownItem> _allPeople = new List<DropdownItem>();

    static HomeController()
    {
        // 模拟100万条数据
        for (int i = 1; i <= 1000000; i++)
        {
            _allPeople.Add(new DropdownItem { Id = i.ToString(), Name = $"Person {i:D7} Name Example" });
        }
        _allPeople.Add(new DropdownItem { Id = "1000001", Name = "John Doe" });
        _allPeople.Add(new DropdownItem { Id = "1000002", Name = "Jane Smith" });
        _allPeople.Add(new DropdownItem { Id = "1000003", Name = "Peter Jones" });
        _allPeople.Add(new DropdownItem { Id = "1000004", Name = "Alice Johnson" });
    }

    public ActionResult Index()
    {
        // 初始加载页面时，下拉列表为空
        return View(new YourViewModel { IdPersona = "" }); 
    }

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

        // 模拟从数据库中查询数据
        // 在实际应用中，这里会是EF Core、Dapper或其他ORM的查询逻辑
        // 确保您的数据库查询是高效的，例如使用LIKE操作符并创建适当的索引
        var results = _allPeople
            .Where(p => p.Name.IndexOf(searchTerm, System.StringComparison.OrdinalIgnoreCase) >= 0)
            .Take(50) // 限制返回结果的数量，避免一次性返回过多数据
            .ToList();

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