求助：如何在Blazor中实现基于多API结果的全局搜索栏（含Syncfusion）

原生Blazor实现 #

步骤1：定义组件变量 #

在Blazor组件的代码块中添加以下变量：

// 存储OnInitialized中已获取的原始数据
private List<YourDataType> OriginalData { get; set; } = new();
// 存储过滤后的数据，用于页面渲染
private List<YourDataType> FilteredData { get; set; } = new();
// 绑定搜索输入框的查询词
private string SearchQuery { get; set; } = string.Empty;

替换YourDataType为你的实际数据类型，比如Project、Resource等

步骤2：初始化过滤列表 #

在OnInitialized方法获取完原始数据后，同步初始化过滤列表：

protected override void OnInitialized()
{
    // 保留你原有的数据获取逻辑，比如：
    // OriginalData = YourDataService.GetAllResources();
    
    // 初始化过滤列表为全部原始数据
    FilteredData = new List<YourDataType>(OriginalData);
}

步骤3：实现搜索过滤方法 #

添加搜索逻辑，根据输入词过滤原始数据：

private void Search()
{
    if (string.IsNullOrWhiteSpace(SearchQuery))
    {
        // 搜索词为空时恢复显示全部数据
        FilteredData = new List<YourDataType>(OriginalData);
        return;
    }
    
    // 根据业务需求匹配数据字段，这里示例多字段模糊匹配（忽略大小写）
    FilteredData = OriginalData.Where(item => 
        item.ProjectName.Contains(SearchQuery, StringComparison.OrdinalIgnoreCase) ||
        item.ResourceName.Contains(SearchQuery, StringComparison.OrdinalIgnoreCase) ||
        item.ReportName.Contains(SearchQuery, StringComparison.OrdinalIgnoreCase)
    ).ToList();
}

步骤4：关联输入框与搜索方法 #

更新HTML输入框，通过双向绑定获取输入值并触发搜索：

<input id="search" class="global-search-bar" type="text" name="search" 
       placeholder="Jump into a project, resource, report or something else..." 
       @bind="@SearchQuery" @bind:event="oninput" @oninput="Search" />

如果不想用双向绑定，也可以通过ChangeEventArgs直接获取输入值：

<input id="search" class="global-search-bar" type="text" name="search" 
       placeholder="Jump into a project, resource, report or something else..." 
       @oninput="Search" />

对应的搜索方法改为：

private void Search(ChangeEventArgs e)
{
    var searchQuery = e.Value?.ToString() ?? string.Empty;
    
    if (string.IsNullOrWhiteSpace(searchQuery))
    {
        FilteredData = new List<YourDataType>(OriginalData);
        return;
    }
    
    FilteredData = OriginalData.Where(item => 
        item.ProjectName.Contains(searchQuery, StringComparison.OrdinalIgnoreCase) ||
        item.ResourceName.Contains(searchQuery, StringComparison.OrdinalIgnoreCase)
    ).ToList();
}

Syncfusion组件库简化实现 #

Syncfusion的AutoComplete组件内置搜索过滤功能，无需手动编写复杂逻辑：

步骤1：准备工作 #

先安装Syncfusion Blazor下拉组件包：

Install-Package Syncfusion.Blazor.DropDowns

在_Imports.razor中添加命名空间：

@using Syncfusion.Blazor.DropDowns

步骤2：基础全局搜索实现 #

直接使用组件绑定数据源，配置内置过滤规则：

<SfAutoComplete TValue="int" TItem="YourDataType" 
                Placeholder="Jump into a project, resource, report or something else..."
                DataSource="@OriginalData"
                FilterType="FilterType.Contains"
                @bind-Value="@SelectedItemId">
    <!-- 设置显示文本字段和值字段，根据你的数据结构调整 -->
    <AutoCompleteFieldSettings Text="ProjectName" Value="Id" />
</SfAutoComplete>

替换TValue为数据主键类型（如string或int），YourDataType为实际数据类型

自定义多字段搜索 #

如果需要匹配多个数据字段，使用CustomFilter属性自定义过滤逻辑：

<SfAutoComplete TValue="int" TItem="YourDataType" 
                Placeholder="Jump into a project, resource, report or something else..."
                DataSource="@OriginalData"
                CustomFilter="@MultiFieldSearchFilter"
                @bind-Value="@SelectedItemId">
    <AutoCompleteFieldSettings Text="DisplayName" /> <!-- 可自定义显示字段或使用现有字段 -->
</SfAutoComplete>

对应的自定义过滤方法：

private bool MultiFieldSearchFilter(YourDataType item, string searchQuery)
{
    if (string.IsNullOrWhiteSpace(searchQuery)) return true;
    
    // 多字段模糊匹配，忽略大小写
    return item.ProjectName.Contains(searchQuery, StringComparison.OrdinalIgnoreCase) ||
           item.ResourceName.Contains(searchQuery, StringComparison.OrdinalIgnoreCase) ||
           item.ReportName.Contains(searchQuery, StringComparison.OrdinalIgnoreCase);
}

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