Blazor Server侧边栏搜索栏实现菜单检索回车跳转功能求助

1. 定义统一的菜单数据模型 #

先把所有菜单项（含下拉子项）抽象成可遍历的数据结构，方便后续搜索过滤：

public class MenuItem
{
    public string Name { get; set; } = string.Empty;
    public string Url { get; set; } = string.Empty;
    public List<MenuItem>? Children { get; set; }
}

2. 组件内维护搜索状态与核心逻辑 #

在你的侧边栏组件中，注入NavigationManager用于页面导航，同时定义搜索相关的状态变量和过滤方法：

@inject NavigationManager NavManager

<!-- 搜索输入框 -->
<InputSearch @bind-Value="SearchKeyword" 
             @onkeydown="HandleKeyDown"
             placeholder="搜索菜单..."
             class="sidebar-search-input" />

<!-- 搜索结果面板 -->
@if (FilteredMenuItems.Any())
{
    <div class="search-results-panel">
        @foreach (var item in FilteredMenuItems)
        {
            <div @onclick="() => NavigateTo(item.Url)" 
                 class="search-result-item">
                @item.Name
            </div>
        }
    </div>
}

@code {
    private string SearchKeyword { get; set; } = string.Empty;
    private List<MenuItem> FilteredMenuItems { get; set; } = new();
    // 假设这是你的原始菜单数据，可从服务或配置中加载
    private List<MenuItem> OriginalMenuItems { get; set; } = new()
    {
        new MenuItem 
        { 
            Name = "Dashboard", 
            Url = "/dashboard" 
        },
        new MenuItem 
        { 
            Name = "管理", 
            Children = new List<MenuItem>
            {
                new MenuItem { Name = "用户管理", Url = "/admin/users" },
                new MenuItem { Name = "角色管理", Url = "/admin/roles" }
            }
        }
    };

    protected override void OnParametersSet()
    {
        FilterMenuItems();
    }

    private void FilterMenuItems()
    {
        FilteredMenuItems.Clear();
        if (string.IsNullOrWhiteSpace(SearchKeyword)) return;

        // 递归遍历所有菜单项，匹配关键词
        void TraverseMenu(List<MenuItem> items)
        {
            foreach (var item in items)
            {
                if (item.Name.Contains(SearchKeyword, StringComparison.OrdinalIgnoreCase))
                {
                    FilteredMenuItems.Add(item);
                }
                if (item.Children?.Any() == true)
                {
                    TraverseMenu(item.Children);
                }
            }
        }

        TraverseMenu(OriginalMenuItems);
    }

    private void HandleKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter" && FilteredMenuItems.Any())
        {
            // 回车时跳转到第一个匹配项，也可扩展支持选中项跳转
            NavManager.NavigateTo(FilteredMenuItems.First().Url);
            // 清空搜索关键词，隐藏结果面板
            SearchKeyword = string.Empty;
            FilterMenuItems();
        }
    }

    private void NavigateTo(string url)
    {
        NavManager.NavigateTo(url);
        SearchKeyword = string.Empty;
        FilterMenuItems();
    }
}

3. 样式优化（可选） #

可以添加简单的CSS让搜索结果面板更友好：

.sidebar-search-input {
    width: 100%;
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.search-results-panel {
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
}

.search-result-item {
    padding: 8px 12px;
    cursor: pointer;
}

.search-result-item:hover {
    background: #f5f5f5;
}

关键说明 #

• 全程使用Blazor内置的NavigationManager实现页面跳转，完全不需要JavaScript
• 通过递归遍历菜单数据，实现对所有层级菜单项的搜索
• 回车事件通过@onkeydown绑定C#方法处理，直接判断按键触发导航
• 搜索匹配使用StringComparison.OrdinalIgnoreCase实现不区分大小写的模糊搜索

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