Blazor Fluent UI AutoComplete组件无法正常工作求助

我通过模板创建Blazor项目后，尝试将Fluent UI Autocomplete组件与演示数据关联，几乎完全复制示例代码，但组件毫无反应。

页面代码 #

@page "/"

<PageTitle>Home</PageTitle>

<FluentAutocomplete TOption="Country"
                    AutoComplete="off"
                    Autofocus="true"
                    Label="Select a country"
                    Width="250px"
                    Placeholder="Select countries"
                    OnOptionsSearch="@OnSearchAsync"
                    OptionText="@(item => item.Name)"
                    @bind-SelectedOptions="@SelectedItems" />

<p>
    <b>Selected</b>: @(String.Join(" - ", SelectedItems.Select(i => i.Name)))
</p>

@code
{

  protected List<Country> Countries = new List<Country>
  {
    new Country {Name = "whatever", Code ="wh"}, 
    new Country {Name = "somewhere", Code = "so"}
  };

  IEnumerable<Country> SelectedItems = Array.Empty<Country>();

  private async Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
  {
    e.Items = Countries.Where(i => i.Name.Contains(e.Text, StringComparison.OrdinalIgnoreCase)).ToArray();
  }

  public class Country
  {
    public string Code { get; set; }
    public string Name { get; set; }
  }
}

Program.cs配置代码 #

using Microsoft.FluentUI.AspNetCore.Components;
using FluentUIDemo.Components;
using FluentUIDemo.Services;
using FluentUIDemo;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();

builder.Services.AddHttpClient();

builder.Services.AddFluentUIComponents();

builder.Services.AddScoped<IMailService, MailService>();


var app = builder.Build();

排查步骤 #

• 补全Program.cs中间件配置
  现有代码缺少关键的中间件启动逻辑，组件资源无法正常加载。在var app = builder.Build();后添加以下代码：

  if (!app.Environment.IsDevelopment())
  {
      app.UseExceptionHandler("/Error", createScopeForErrors: true);
      app.UseHsts();
  }
  
  app.UseHttpsRedirection();
  app.UseStaticFiles();
  app.UseAntiforgery();
  
  app.MapRazorComponents<App>()
      .AddInteractiveServerRenderMode();
  
  app.Run();
  

• 修正OnSearchAsync方法逻辑
  当前方法为同步逻辑却使用async Task，且未处理空搜索文本的情况。修改为：

  private void OnSearchAsync(OptionsSearchEventArgs<Country> e)
  {
      e.Items = string.IsNullOrEmpty(e.Text) 
          ? Countries.ToArray() 
          : Countries.Where(i => i.Name.Contains(e.Text, StringComparison.OrdinalIgnoreCase)).ToArray();
  }
  

  若坚持使用异步写法，需补充await Task.CompletedTask;。

• 调整选中项绑定类型
  将IEnumerable<Country> SelectedItems改为List<Country> SelectedItems = new();，确保集合变更能触发UI更新。

• 检查Fluent UI包版本
  确认NuGet中Microsoft.FluentUI.AspNetCore.Components为最新稳定版，版本不兼容可能导致组件失效。

• 排查浏览器控制台错误
  打开浏览器开发者工具（F12），查看Console标签页是否有JS报错，Network标签页是否有资源加载失败的情况。

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