Peace
/
BlazorFluentUIPractice
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

search 1

Browse Source
main
Peace 10 months ago
parent 91517237c3
commit 1667c9ee95
2 changed files with 218 additions and 0 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      BlazorFluentUI/Components/Layout/NavMenu.razor
  2. 217
      BlazorFluentUI/Components/Pages/FormInputs/FormInputSearch.razor

1
BlazorFluentUI/Components/Layout/NavMenu.razor
Unescape View File

@ -33,6 +33,7 @@
<FluentNavLink Href="forminputnumberfield" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">NumberField</FluentNavLink>
<FluentNavLink Href="forminputradio" Icon="@(new Icons.Regular.Size20.RadioButton())" IconColor="Color.Accent">Radio</FluentNavLink>
<FluentNavLink Href="forminputrating" Icon="@(new Icons.Regular.Size20.Star())" IconColor="Color.Accent">Rating</FluentNavLink>
<FluentNavLink Href="forminputsearch" Icon="@(new Icons.Regular.Size20.ScreenSearch())" IconColor="Color.Accent">Search</FluentNavLink>
</FluentNavGroup>
</FluentNavMenu>

217
BlazorFluentUI/Components/Pages/FormInputs/FormInputSearch.razor
Unescape View File

@ -0,0 +1,217 @@
@page "/forminputsearch"
@using System.Timers;
@rendermode RenderMode.InteractiveServer
<FluentLabel Typo="Typography.H3">Search</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<FluentLabel Typo="Typography.Body">
The <code>FluentSearch</code> wraps a web component of a <code>search</code> element.
</FluentLabel>
<FluentLabel class="my-3" Typo="Typography.H4">Default Example</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<div>
Without a label:
<FluentSearch @bind-Value="value" AriaLabel="Search"/>
</div>
<div>
With a label:
<FluentSearch @bind-Value="value" Label="This is a label" />
</div>
</FluentCard>
<FluentLabel class="my-3" Typo="Typography.H4">Interactive</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentSearch Class="mb-3" Placeholder="Search for State"
@ref="interactiveTest"
@bind-Value="interactiveSearchValue"
@bind-Value:after="HandleSearchInput"/>
<FluentListbox AriaLabel="Search Results"
Items="@interactiveSearchResults"
TOption="string"
SelectedOptionChanged="@(e => interactiveSearchValue = e != interactiveDefaultsText ? e : string.Empty)"/>
<p>
You searched for: @interactiveSearchValue
</p>
</FluentCard>
<FluentLabel class="my-3" Typo="Typography.H4">Interactive with debounce</FluentLabel>
<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
<FluentSearch Class="mb-3" Placeholder="Search for State"
@ref="debounceTest"
@bind-Value="DebounceSearchValue"
@bind-Value:after="HandleDebounceClear"
@oninput="(e => DebounceSearchValue = e.Value?.ToString())"/>
<FluentListbox AriaLabel="Search Results"
Items="@debounceSearchResults"
TOption="string"
SelectedOptionChanged="@(e => debounceSearchValue = e != interactiveDefaultsText ? e : string.Empty)" />
<p>
You searched for: @debounceSearchValue
</p>
</FluentCard>
@code {
string? value;
FluentSearch interactiveTest;
string? interactiveSearchValue = string.Empty;
static string interactiveDefaultsText = "No results";
static List<string> defaultSearchResult()
{
return new List<string>() { interactiveDefaultsText };
}
List<string> interactiveSearchResults = defaultSearchResult();
void HandleSearchInput()
{
if (string.IsNullOrWhiteSpace(interactiveSearchValue))
{
interactiveSearchResults = defaultSearchResult();
interactiveSearchValue = string.Empty;
}
else
{
string searchTerm = interactiveSearchValue.ToLower();
if (searchTerm.Length < 1)
return;
List<string> temp = searchData.Where(str => str.ToLower().Contains(searchTerm)).Select(str => str).ToList();
if (temp.Count > 0)
interactiveSearchResults = temp;
}
}
List<string> searchData = new()
{
"Alabama",
"Alaska",
"Arizona",
"Arkansas",
"California",
"Colorado",
"Connecticut",
"Delaware",
"Florida",
"Georgia",
"Hawaii",
"Idaho",
"Illinois",
"Indiana",
"Iowa",
"Kansas",
"Kentucky",
"Louisiana",
"Maine",
"Maryland",
"Massachussets",
"Michigain",
"Minnesota",
"Mississippi",
"Missouri",
"Montana",
"Nebraska",
"Nevada",
"New Hampshire",
"New Jersey",
"New Mexico",
"New York",
"North Carolina",
"North Dakota",
"Ohio",
"Oklahoma",
"Oregon",
"Pennsylvania",
"Rhode Island",
"South Carolina",
"South Dakota",
"Texas",
"Tennessee",
"Utah",
"Vermont",
"Virginia",
"Washington",
"Wisconsin",
"West Virginia",
"Wyoming"
};
Timer? debounceTimer = null;
FluentSearch? debounceTest;
string? debounceSearchValue = string.Empty;
string? DebounceSearchValue
{
get => debounceSearchValue;
set
{
if (value != debounceSearchValue)
{
debounceSearchValue = value;
DisposeDebounceTimer();
debounceTimer = new Timer(400);
debounceTimer.Elapsed += TimerElapsed_TickAsync;
debounceTimer.Enabled = true;
debounceTimer.Start();
}
}
}
private async void TimerElapsed_TickAsync(object? sender, EventArgs e)
{
DisposeDebounceTimer();
await InvokeAsync(OnDebounceSearch);
}
private void DisposeDebounceTimer()
{
if (debounceTimer != null)
{
debounceTimer.Enabled = false;
debounceTimer.Elapsed -= TimerElapsed_TickAsync;
debounceTimer.Dispose();
debounceTimer = null;
}
}
List<string> debounceSearchResults = defaultSearchResult();
private void OnDebounceSearch()
{
if (!string.IsNullOrWhiteSpace(DebounceSearchValue))
{
string searchTerm = DebounceSearchValue.ToLower();
List<string> temp = searchData.Where(str => str.ToLower().Contains(searchTerm)).Select(str => str).ToList();
if (temp.Count() > 0)
{
debounceSearchResults = temp;
}
else
{
debounceSearchResults = defaultSearchResult();
}
StateHasChanged();
}
else
{
debounceSearchResults = defaultSearchResult();
StateHasChanged();
}
}
private void HandleDebounceClear()
{
if (string.IsNullOrWhiteSpace(DebounceSearchValue))
return;
DisposeDebounceTimer();
debounceSearchResults = defaultSearchResult();
DebounceSearchValue = string.Empty;
StateHasChanged();
}
}
Write Preview
Loading…
Cancel
Save