search 2

BlazorFluentUI/Components/Pages/FormInputs/FormInputSearch.razor

@@ -31,7 +31,7 @@
     <FluentListbox AriaLabel="Search Results"
                    Items="@interactiveSearchResults"
                    TOption="string"
-                   SelectedOptionChanged="@(e => interactiveSearchValue = e != interactiveDefaultsText ? e : string.Empty)"/>
+                   SelectedOptionChanged="@(e => interactiveSearchValue = e != defaultResultsText ? e : string.Empty)"/>
     <p>
         You searched for: @interactiveSearchValue
     </p>
@@ -47,31 +47,86 @@
     <FluentListbox AriaLabel="Search Results"
                    Items="@debounceSearchResults"
                    TOption="string"
-                   SelectedOptionChanged="@(e => debounceSearchValue = e != interactiveDefaultsText ? e : string.Empty)" />
+                   SelectedOptionChanged="@(e => debounceSearchValue = e != defaultResultsText ? e : string.Empty)" />
     <p>
         You searched for: @debounceSearchValue
     </p>
 </FluentCard>
 
-@code {
-    string? value;
+<FluentLabel class="my-3" Typo="Typography.H4">Immediate (with and without debounce)</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical" VerticalGap="10">
+        <FluentNumberField @bind-Value="immediateDelay"
+                           TValue="int"
+                           Label="Immediate Delay"
+                           Placeholder="Delay"
+                           Min="0" Max="2000"
+                           Step="100" />
+        <FluentSearch @bind-Value="immediateSearchValue"
+                      @bind-Value:after="OnImmediateSearch"
+                      Immediate="true"
+                      ImmediateDelay="immediateDelay"
+                      Placeholder="Search for State" />
+        <p>You search for: @immediateSearchValue</p>
+        <FluentListbox AriaLabel="Search Result"
+                       TOption="string"
+                       Items="@immediateSearchResults"
+                       SelectedOptionChanged="@(e => immediateSearchValue = (e != defaultResultsText ? e : string.Empty))" />
+    </FluentStack>
+</FluentCard>
+
+<FluentLabel class="my-3" Typo="Typography.H4">Display</FluentLabel>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentStack Orientation="Orientation.Vertical" VerticalGap="10">
+        <FluentSearch Label="Full Width" @bind-Value="stateValue" Style="width:100%"/>
+        <FluentSearch Label="Placeholder" @bind-Value="stateValue" Placeholder="This is placeholder" />
+        <FluentSearch Label="Required" @bind-Value="stateValue" Required="true" />
+        <div>
+            <h4>Disabled</h4>
+        <FluentSearch @bind-Value="stateValue" Disabled="true" />
+        <FluentSearch Label="Disabled with label" @bind-Value="stateValue" Disabled="true" />
+        <FluentSearch Label="Disabled with Placeholder" @bind-Value="stateValue" Disabled="true" Placeholder="This is placeholder" />
+        </div>
+        <div>
+            <h4>Read Only</h4>
+            <FluentSearch @bind-Value="stateValue" ReadOnly="true" />
+            <FluentSearch Label="Read only with Label" @bind-Value="stateValue" ReadOnly="true" />
+        </div>
+        <div>
+            <h4>Icons</h4>
+            <FluentSearch Label="With Icon (start)" @bind-Value="stateValue">
+                <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Accent" Slot="start"/>
+            </FluentSearch>
+            <FluentSearch Label="With Icon (end)" @bind-Value="stateValue">
+                <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Accent" Slot="end" />
+            </FluentSearch>
+            <FluentSearch Label="With Icon (both)" @bind-Value="stateValue">
+                <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Accent" Slot="start" />
+                <FluentIcon Value="@(new Icons.Regular.Size16.Globe())" Color="@Color.Accent" Slot="end" />
+            </FluentSearch>
+        </div>
+    </FluentStack>
+</FluentCard>
+
+    @code {
+        string? value;
 
     FluentSearch interactiveTest;
     string? interactiveSearchValue = string.Empty;
 
-    static string interactiveDefaultsText = "No results";
-    static List<string> defaultSearchResult()
+    static string defaultResultsText = "No results";
+    static List<string> GetDefaultSearchResult()
     {
-        return new List<string>() { interactiveDefaultsText };
+        return new List<string>() { defaultResultsText };
     }
 
-    List<string> interactiveSearchResults = defaultSearchResult();
+    List<string> interactiveSearchResults = GetDefaultSearchResult();
 
     void HandleSearchInput()
     {
         if (string.IsNullOrWhiteSpace(interactiveSearchValue))
         {
-            interactiveSearchResults = defaultSearchResult();
+            interactiveSearchResults = GetDefaultSearchResult();
             interactiveSearchValue = string.Empty;
         }
         else
@@ -178,7 +233,7 @@
         }
     }
 
-    List<string> debounceSearchResults = defaultSearchResult();
+    List<string> debounceSearchResults = GetDefaultSearchResult();
 
     private void OnDebounceSearch()
     {
@@ -193,13 +248,13 @@
             }
             else
             {
-                debounceSearchResults = defaultSearchResult();
+                debounceSearchResults = GetDefaultSearchResult();
             }
             StateHasChanged();
         }
         else
         {
-            debounceSearchResults = defaultSearchResult();
+            debounceSearchResults = GetDefaultSearchResult();
             StateHasChanged();
         }
     }
@@ -210,8 +265,31 @@
             return;
 
         DisposeDebounceTimer();
-        debounceSearchResults = defaultSearchResult();
+        debounceSearchResults = GetDefaultSearchResult();
         DebounceSearchValue = string.Empty;
         StateHasChanged();
     }
+
+    int immediateDelay;
+    string? immediateSearchValue;
+
+    static List<string> immediateSearchResults = GetDefaultSearchResult();
+
+    void OnImmediateSearch()
+    {
+        if (string.IsNullOrWhiteSpace(immediateSearchValue))
+        {
+            immediateSearchResults = GetDefaultSearchResult();
+            return;
+        }
+
+        List<string> temp = searchData
+            .Where(str => str.Contains(immediateSearchValue, StringComparison.OrdinalIgnoreCase))
+            .Select(str => str)
+            .ToList();
+
+        immediateSearchResults = temp.Any() ? temp : GetDefaultSearchResult();
+    }
+
+        string? stateValue;
 }