diff --git a/README.md b/README.md index be0a671..53a1ec7 100644 --- 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 index 5bd3bbc..a135a9a 100644 --- a/samples/BlazorServerSide/Pages/Index.razor +++ b/samples/BlazorServerSide/Pages/Index.razor @@ -8,10 +8,14 @@ @person.Firstname + + Please enter at least 3 character to perform a search. + @person.Firstname @person.Lastname @@ -124,10 +128,14 @@ @bind-Values="SelectedPeople" Disabled="IsDisabledMulti" EnableDropDown="true" + MinimumLength="2" placeholder="Search by first name..."> @person.Firstname + + Please enter a minimum of 2 characters to perform a search. + @person.Firstname @person.Lastname (Id: @person.Id) diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor b/src/Blazored.Typeahead/BlazoredTypeahead.razor index 6660399..70143f0 100644 --- a/src/Blazored.Typeahead/BlazoredTypeahead.razor +++ b/src/Blazored.Typeahead/BlazoredTypeahead.razor @@ -129,7 +129,15 @@ } - @if (ShouldShowSuggestions()) + @if (ShouldShowHelpTemplate()) + { +
+
+ @HelpTemplate +
+
+ } + else if (ShouldShowSuggestions()) {
@if (HeaderTemplate != null) diff --git a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs index edbfa7e..46dc58f 100644 --- a/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs +++ b/src/Blazored.Typeahead/BlazoredTypeahead.razor.cs @@ -37,6 +37,7 @@ public partial class BlazoredTypeahead : ComponentBase, IDisposab [Parameter] public Func ConvertMethod { get; set; } [Parameter] public RenderFragment NotFoundTemplate { get; set; } + [Parameter] public RenderFragment HelpTemplate { get; set; } [Parameter] public RenderFragment ResultTemplate { get; set; } [Parameter] public RenderFragment SelectedTemplate { get; set; } [Parameter] public RenderFragment HeaderTemplate { get; set; } @@ -58,6 +59,7 @@ public partial class BlazoredTypeahead : 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 index 6e92974..43f0a44 100644 --- 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;