diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
index a2614a05f5..feb5474744 100644
--- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
+++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -6065,6 +6065,13 @@
Gets or sets whether the dropdown is shown when there are no items.
+
+
+ Gets or sets whether the component will display a progress indicator while fetching data.
+ A progress ring will be shown ad the end of the component, when the is invoked.
+ You can customize the progress indicator by using the or parameters: see .
+
+
If true, the options list will be rendered with virtualization. This is normally used in conjunction with
@@ -6177,6 +6184,19 @@
+
+
+
+
+
+ Gets a value indicating whether the operation is currently in progress.
+
+
+
+
+ Gets the items to display in the header or footer.
+
+
diff --git a/examples/Demo/Shared/Pages/List/Autocomplete/Examples/AutocompleteCustomized.razor b/examples/Demo/Shared/Pages/List/Autocomplete/Examples/AutocompleteCustomized.razor
index 9315d477f1..d7b77e5fb1 100644
--- a/examples/Demo/Shared/Pages/List/Autocomplete/Examples/AutocompleteCustomized.razor
+++ b/examples/Demo/Shared/Pages/List/Autocomplete/Examples/AutocompleteCustomized.razor
@@ -5,7 +5,8 @@
TOption="Person"
Width="100%"
Placeholder="search"
- OnOptionsSearch="@OnSearch"
+ OnOptionsSearch="@OnSearchAsync"
+ ShowProgressIndicator="@ShowProgressIndicator"
MaximumSelectedOptions="3"
KeepOpen="true"
OptionText="@(item => item.FirstName)"
@@ -48,11 +49,12 @@
Style="padding: 8px; font-size: 11px; border-bottom: 1px solid var(--neutral-fill-stealth-hover);">
Suggested contacts
+
@* Content display at the bottom of the Popup area *@
- @if (!context.Any())
+ @if (!context.Items.Any())
{
No results found
@@ -65,13 +67,23 @@
Selected: @(String.Join(" - ", SelectedItems.Select(i => i.LastName)))
+
+
+
+
@code
{
+ bool ShowProgressIndicator = false;
FluentAutocomplete ContactList = default!;
IEnumerable SelectedItems = Array.Empty();
- private void OnSearch(OptionsSearchEventArgs e)
+ private async Task OnSearchAsync(OptionsSearchEventArgs e)
{
+ if (ShowProgressIndicator)
+ {
+ await Task.Delay(500); // Simulate a delay for the search operation
+ }
+
e.Items = Data.People.Where(i => i.LastName.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase) ||
i.FirstName.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
.OrderBy(i => i.LastName);
diff --git a/src/Core/Components/List/FluentAutocomplete.razor b/src/Core/Components/List/FluentAutocomplete.razor
index f6499e6ff7..4bb93343c3 100644
--- a/src/Core/Components/List/FluentAutocomplete.razor
+++ b/src/Core/Components/List/FluentAutocomplete.razor
@@ -71,6 +71,11 @@
}
@if (!Disabled && !ReadOnly)
{
+ if (ShowProgressIndicator && _inProgress)
+ {
+
+ }
+
if (this.SelectedOptions?.Any() == true || !string.IsNullOrEmpty(ValueText) || this.SelectedOption is not null)
{
if (IconDismiss != null)
@@ -122,7 +127,7 @@
Shadow="ElevationShadow.Flyout">
@if (HeaderContent != null)
{
- @HeaderContent(Items ?? Array.Empty())
+ @HeaderContent(new HeaderFooterContent(Items, _inProgress))
}