Select SearhBox Enhancements (#144)

Author: mckaragoz

CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor

@@ -32,7 +32,7 @@
                         {
                             <MudCheckBox CheckedIcon="@SelectAllCheckBoxIcon" Color="@Color" @bind-Checked="_allSelected" @onclick="() => SelectAllItems(_allSelected)" Dense="true" />
                         }
-                        <MudTextField @bind-Value="@_searchString" Class="@ClassSearchBox" OnKeyUp="@(() => UpdateSelectedStyles())" Immediate="true" Variant="Variant.Outlined" Margin="Margin.Dense"
+                        <MudTextField @bind-Value="@_searchString" Class="@ClassSearchBox" Placeholder="@SearchBoxPlaceholder" OnKeyUp="@(() => UpdateSelectedStyles())" Immediate="true" Variant="Variant.Outlined" Margin="Margin.Dense"
                             Adornment="Adornment.End" AdornmentIcon="@Icons.Material.Filled.Search" AdornmentColor="Color" AutoFocus="@SearchBoxAutoFocus" />
                     </div>
                 </MudListSubheaderExtended>

CodeBeam.MudExtensions/Components/ListExtended/MudListExtended.razor.cs

@@ -143,6 +143,13 @@ public Func<T, string> ToStringFunc
         [Category(CategoryTypes.List.Behavior)]
         public ICollection<T> ItemCollection { get; set; } = null;
 
+        /// <summary>
+        /// Custom search func for searchbox. If doesn't set, it search with "Contains" logic by default. Passed value and searchString values.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.ListBehavior)]
+        public Func<T, string, bool> SearchFunc { get; set; }
+
         /// <summary>
         /// If true, shows a searchbox for filtering items. Only works with ItemCollection approach.
         /// </summary>
@@ -164,6 +171,10 @@ public Func<T, string> ToStringFunc
         [Category(CategoryTypes.List.Behavior)]
         public string ClassSearchBox { get; set; }
 
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public string SearchBoxPlaceholder { get; set; }
+
         /// <summary>
         /// Allows virtualization. Only work if ItemCollection parameter is not null.
         /// </summary>
@@ -1323,6 +1334,11 @@ protected ICollection<T> GetSearchedItems()
                 return ItemCollection;
             }
 
+            if (SearchFunc != null)
+            {
+                return ItemCollection.Where(x => SearchFunc.Invoke(x, _searchString)).ToList();
+            }
+
             return ItemCollection.Where(x => Converter.Set(x).Contains(_searchString, StringComparison.CurrentCultureIgnoreCase)).ToList();
         }
 

CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor

@@ -111,7 +111,7 @@
                                  Clickable="true" Color="@Color" Dense="@Dense" ItemCollection="@ItemCollection" Virtualize="@Virtualize" DisablePadding="@DisablePopoverPadding" DisableSelectedItemStyle="@DisableSelectedItemStyle"
                                          MultiSelection="@MultiSelection" MultiSelectionComponent="@MultiSelectionComponent" MultiSelectionAlign="@MultiSelectionAlign" SelectAll="@SelectAll" SelectAllPosition="@SelectAllPosition" SelectAllText="@SelectAllText"
                                  CheckedIcon="@CheckedIcon" UncheckedIcon="@UncheckedIcon" IndeterminateIcon="@IndeterminateIcon" SelectValueOnTab="@SelectValueOnTab" Comparer="@Comparer"
-                                 ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox" SearchBoxAutoFocus="@SearchBoxAutoFocus" ToStringFunc="@ToStringFunc">
+                                 ItemTemplate="@ItemTemplate" ItemSelectedTemplate="@ItemSelectedTemplate" ItemDisabledTemplate="@ItemDisabledTemplate" SearchBox="@SearchBox" SearchBoxAutoFocus="@SearchBoxAutoFocus" SearchFunc="@SearchFunc" SearchBoxPlaceholder="@SearchBoxPlaceholder" ToStringFunc="@ToStringFunc">
                             @ChildContent
 						</MudListExtended>
 					</CascadingValue>

CodeBeam.MudExtensions/Components/SelectExtended/MudSelectExtended.razor.cs

@@ -150,6 +150,10 @@ public MudSelectExtended()
         [Category(CategoryTypes.List.Appearance)]
         public bool DisableSelectedItemStyle { get; set; }
 
+        [Parameter]
+        [Category(CategoryTypes.List.Behavior)]
+        public string SearchBoxPlaceholder { get; set; }
+
         /// <summary>
         /// If true, compact vertical padding will be applied to all Select items.
         /// </summary>
@@ -217,6 +221,13 @@ public bool Dense
         [Category(CategoryTypes.FormComponent.Behavior)]
         public Func<List<T>, string> MultiSelectionTextFunc { get; set; }
 
+        /// <summary>
+        /// Custom search func for searchbox. If doesn't set, it search with "Contains" logic by default. Passed value and searchString values.
+        /// </summary>
+        [Parameter]
+        [Category(CategoryTypes.FormComponent.ListBehavior)]
+        public Func<T, string, bool> SearchFunc { get; set; }
+
         /// <summary>
         /// If not null, select items will automatically created regard to the collection.
         /// </summary>

ComponentViewer.Docs/Pages/Components/SelectExtendedPage.razor

@@ -10,7 +10,7 @@
         <SelectExtendedExample1 />
     </ExampleCard>
 
-    <ExampleCard ExampleName="SelectExtendedExample6" Title="SearchBox" Description="SearchBox can be added if items populated with ItemCollection parameter. Ctrl+Shift+F combination shows/hides the searchbox if the box not focused.">
+    <ExampleCard ExampleName="SelectExtendedExample6" Title="SearchBox" Description="SearchBox can be added if items populated with ItemCollection parameter. Ctrl+Shift+F combination shows/hides the searchbox if the box not focused. Custom search funcs also supported.">
         <SelectExtendedExample6 />
     </ExampleCard>
 

ComponentViewer.Docs/Pages/Examples/ListExtendedExample2.razor

@@ -5,7 +5,7 @@
     <MudItem xs="12" sm="8" Class="d-flex gap-8 align-top justify-center" Style="height: 500px">
         <MudPaper Width="300px" Elevation="0">
             <MudText Class="ma-4">Array List</MudText>
-            <MudListExtended ItemCollection="_states" Clickable="true" MaxItems="_maxItems" SearchBox="_searchBox" @bind-SelectedValue="_selectedState" />
+            <MudListExtended ItemCollection="_states" Clickable="true" MaxItems="_maxItems" SearchBox="_searchBox" SearchFunc="@(new Func<string, string, bool>(SearchItems))" @bind-SelectedValue="_selectedState" />
         </MudPaper>
 
         <MudPaper Width="300px" Elevation="0">
@@ -60,6 +60,21 @@
         "Washington", "West Virginia", "Wisconsin", "Wyoming",
     };
 
+    private bool SearchItems(string value, string searchString)
+    {
+        if (searchString == "")
+        {
+            return true;
+        }
+
+        if (value.StartsWith(searchString, StringComparison.CurrentCultureIgnoreCase))
+        {
+            return true;
+        }
+
+        return false;
+    }
+
     public enum Continent
     {
         Europe,

ComponentViewer.Docs/Pages/Examples/SelectExtendedExample6.razor

@@ -1,7 +1,8 @@
 
 <MudGrid>
-    <MudItem xs="12" sm="8">
-        <MudSelectExtended MultiSelection="@_multiselection" ItemCollection="_states" SearchBox="true" SearchBoxAutoFocus="@_searchBoxAutoFocus" T="string" Label="US States" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" />
+    <MudItem xs="12" sm="8" Class="d-flex gap-4">
+        <MudSelectExtended MultiSelection="@_multiselection" ItemCollection="_states" SearchBox="true" SearchBoxAutoFocus="@_searchBoxAutoFocus" T="string" Label="Standard Search" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" HelperText="Search with 'Contains' logic" />
+        <MudSelectExtended MultiSelection="@_multiselection" ItemCollection="_states" SearchBox="true" SearchBoxAutoFocus="@_searchBoxAutoFocus" SearchFunc="@(new Func<string, string, bool>(SearchItems))" T="string" Label="Custom Search Func" AnchorOrigin="Origin.BottomCenter" Variant="Variant.Outlined" SearchBoxPlaceholder="Some Placeholder" HelperText="Search with 'StartsWith' logic" />
     </MudItem>
 
     <MudItem xs="12" sm="4">
@@ -34,4 +35,19 @@
         "Washington", "West Virginia", "Wisconsin", "Wyoming",
     };
 
+    private bool SearchItems(string value, string searchString)
+    {
+        if (searchString == "")
+        {
+            return true;
+        }
+
+        if (value.StartsWith(searchString, StringComparison.CurrentCultureIgnoreCase))
+        {
+            return true;
+        }
+
+        return false;
+    }
+
 }