C# MVC中实时搜索后如何更新无序列表的匹配内容？

你当前的核心问题是控制器返回的是完整视图，而非可直接插入列表的内容，同时前端缺少DOM替换逻辑，可通过以下两种方案解决：

方案1：使用分部视图（改动量最小） #

• 第一步：新增分部视图Views/Document/_SearchListPartial.cshtml，内容仅保留列表项渲染逻辑：

@model List<DocumentViewModel>
@foreach (var item in Model)
{
    <li>
        <div style="display:inline-block; min-width:15%">@item.Index</div>
        <div style="display:inline; min-width:80%">@item.Title</div>
    </li>
}

• 第二步：修改控制器返回逻辑，返回分部视图的HTML片段：

public async Task<IActionResult> GetSearchItem(string searchString)
{
    var lst = await _sectionService.GetSearchString(searchString);
    var documentModel = new List<DocumentViewModel>();
    foreach (var item in lst)
    {
        documentModel.Add(new DocumentViewModel
        {
            Id = item.Id.ToString(),
            Title = item.Title,
            Index = item.IndexNumber                    
        });
    }
    // 替换原返回View的逻辑，返回分部视图
    return PartialView("_SearchListPartial", documentModel);
}

• 第三步：补充Ajax回调的DOM替换逻辑，直接将返回的HTML插入ul节点，同时添加防抖优化避免频繁触发请求：

$(function () {
    let timer = null;
    $("#search").keyup(function (e) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            var s = $("#search").val();
            $.get("/Document/GetSearchItem?searchString=" + s, function (r) {
                // 直接替换ul的内容
                $("#menuList").html(r);
            });
        }, 300); // 输入停止300ms后再发请求
    });
});

方案2：返回JSON前端渲染（性能更优） #

• 第一步：修改控制器直接返回JSON数据：

public async Task<IActionResult> GetSearchItem(string searchString)
{
    var lst = await _sectionService.GetSearchString(searchString);
    var documentModel = new List<DocumentViewModel>();
    foreach (var item in lst)
    {
        documentModel.Add(new DocumentViewModel
        {
            Id = item.Id.ToString(),
            Title = item.Title,
            Index = item.IndexNumber                    
        });
    }
    // 返回JSON格式数据
    return Json(documentModel);
}

• 第二步：Ajax回调中遍历数据拼接DOM再替换：

$(function () {
    let timer = null;
    $("#search").keyup(function (e) {
        clearTimeout(timer);
        timer = setTimeout(() => {
            var s = $("#search").val();
            $.get("/Document/GetSearchItem?searchString=" + s, function (r) {
                let htmlStr = '';
                // 遍历返回的数组拼接列表项
                r.forEach(item => {
                    htmlStr += `<li>
                        <div style="display:inline-block; min-width:15%">${item.index}</div>
                        <div style="display:inline; min-width:80%">${item.title}</div>
                    </li>`;
                });
                $("#menuList").html(htmlStr);
            });
        }, 300);
    });
});

补充注意点 #

• 可以在后端加空值判断，当searchString为空时返回全量列表，实现清空搜索框后还原所有内容的效果
• 如果列表数据量不大，也可以直接在前端做本地过滤，不用每次发请求到后端，响应速度更快

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