Merge pull request #119 from Blazored/minlength-template

Added HelpTemplate
Blazored · Mar 6, 2020 · aafddd8 · aafddd8
2 parents 4f7bc2d + 1454709
commit aafddd8
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -47,6 +47,7 @@ Below is a list of all the options available on the Typeahead.
 
 - `ResultTemplate` (Required) - Allows the user to define a template for a result in the results list
 - `SelectedTemplate` (Required) - Allows the user to define a template for a selected item
+- `HelpTemplate` - Allows the user to define a template to show when the `MinimumLength` to perform a search hasn't been reached
 - `NotFoundTemplate` - Allows the user to define a template when no items are found
 - `FooterTemplate` - Allows the user to define a template which is displayed at the end of the results list
 

diff --git a/samples/BlazorServerSide/Pages/Index.razor b/samples/BlazorServerSide/Pages/Index.razor
@@ -8,10 +8,14 @@
     <BlazoredTypeahead SearchMethod="GetPeopleLocal"
                        @bind-Value="FormModel.SelectedPerson"
                        EnableDropDown="true"
+                       MinimumLength="3"
                        placeholder="Search by first name...">
         <SelectedTemplate Context="person">
             @person.Firstname
         </SelectedTemplate>
+        <HelpTemplate>
+            Please enter at least 3 character to perform a search.
+        </HelpTemplate>
         <ResultTemplate Context="person">
             @person.Firstname @person.Lastname
         </ResultTemplate>
@@ -124,10 +128,14 @@
                    @bind-Values="SelectedPeople"
                    Disabled="IsDisabledMulti"
                    EnableDropDown="true"
+                   MinimumLength="2"
                    placeholder="Search by first name...">
     <SelectedTemplate Context="person">
         @person.Firstname
     </SelectedTemplate>
+    <HelpTemplate>
+        Please enter a minimum of 2 characters to perform a search.
+    </HelpTemplate>
     <ResultTemplate Context="person">
         @person.Firstname @person.Lastname (Id: @person.Id)
     </ResultTemplate>

diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor b/src/Blazored.Typeahead/BlazoredTypeahead.razor
@@ -129,7 +129,15 @@
         }
     </div>
 
-    @if (ShouldShowSuggestions())
+    @if (ShouldShowHelpTemplate())
+    {
+        <div class="blazored-typeahead__results">
+            <div class="blazored-typeahead__results-help-template">
+                @HelpTemplate
+            </div>
+        </div>
+    }
+    else if (ShouldShowSuggestions())
     {
         <div class="blazored-typeahead__results">
             @if (HeaderTemplate != null)

diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs
@@ -37,6 +37,7 @@ public partial class BlazoredTypeahead<TItem, TValue> : ComponentBase, IDisposab
         [Parameter] public Func<TItem, TValue> ConvertMethod { get; set; }
 
         [Parameter] public RenderFragment NotFoundTemplate { get; set; }
+        [Parameter] public RenderFragment HelpTemplate { get; set; }
         [Parameter] public RenderFragment<TItem> ResultTemplate { get; set; }
         [Parameter] public RenderFragment<TValue> SelectedTemplate { get; set; }
         [Parameter] public RenderFragment HeaderTemplate { get; set; }
@@ -58,6 +59,7 @@ public partial class BlazoredTypeahead<TItem, TValue> : ComponentBase, IDisposab
         private bool IsShowingMask { get; set; } = false;
         private TItem[] Suggestions { get; set; } = new TItem[0];
         private int SelectedIndex { get; set; }
+        private bool ShowHelpTemplate { get; set; } = false;
         private string SearchText
         {
             get => _searchText;
@@ -70,7 +72,7 @@ private string SearchText
                     _debounceTimer.Stop();
                     SelectedIndex = -1;
                 }
-                else if (value.Length >= MinimumLength)
+                else
                 {
                     _debounceTimer.Stop();
                     _debounceTimer.Start();
@@ -226,7 +228,7 @@ private async Task HandleKeyUpOnMask(KeyboardEventArgs args)
             }
 
             // You can only start searching if it's not a special key (Tab, Enter, Escape, ...)
-            if(args.Key.Length == 1)
+            if (args.Key.Length == 1)
             {
                 IsShowingMask = false;
                 await Task.Delay(250); // Possible race condition here.
@@ -334,6 +336,14 @@ private string GetSelectedSuggestionClass(TItem item, int index)
 
         private async void Search(Object source, ElapsedEventArgs e)
         {
+            if (_searchText.Length < MinimumLength)
+            {
+                ShowHelpTemplate = true;
+                await InvokeAsync(StateHasChanged);
+                return;
+            }
+
+            ShowHelpTemplate = false;
             IsSearching = true;
             await InvokeAsync(StateHasChanged);
             Suggestions = (await SearchMethod?.Invoke(_searchText)).Take(MaximumSuggestions).ToArray();
@@ -378,6 +388,13 @@ private async Task SelectResult(TItem item)
             }
         }
 
+        private bool ShouldShowHelpTemplate()
+        {
+            return SearchText.Length > 0 &&
+                ShowHelpTemplate &&
+                HelpTemplate != null;
+        }
+
         private bool ShouldShowSuggestions()
         {
             return IsShowingSuggestions &&

diff --git a/src/Blazored.Typeahead/wwwroot/blazored-typeahead.css b/src/Blazored.Typeahead/wwwroot/blazored-typeahead.css
@@ -194,6 +194,7 @@
 
 .blazored-typeahead__result,
 .blazored-typeahead__notfound,
+.blazored-typeahead__results-help-template,
 .blazored-typeahead__results-header,
 .blazored-typeahead__results-footer {
     padding: .5rem;