Component for single item selection with dynamic suggestions (based on typed characters).
input
(the Up
and Down
keys).
As an experimental feature we added our own keyboard navigation routines to the affected components. This might be subject to future change.
You can check the progress here: https://github.com/havit/Havit.Blazor/issues/348.
Current value: 1033
@using System.Globalization
<HxAutosuggest Label="CultureInfo"
Placeholder="Start typing to see suggestions"
TItem="CultureInfo"
TValue="int?"
@bind-Value="@autosuggestValue"
DataProvider="ProvideSuggestions"
ValueSelector="(CultureInfo c) => c.LCID"
ItemFromValueResolver="ResolveAutosuggestItemFromValue">
<ItemTemplate Context="item">
@item.EnglishName <sup>@item.LCID</sup>
</ItemTemplate>
<EmptyTemplate>
<span class="p-2">Couldn't find any matching locale</span>
</EmptyTemplate>
</HxAutosuggest>
<p class="mt-3">Current value: @autosuggestValue</p>
@code
{
private int? autosuggestValue = 1033;
private async Task<AutosuggestDataProviderResult<CultureInfo>> ProvideSuggestions(AutosuggestDataProviderRequest request)
{
await Task.Delay(400); // backend API speed simulation
return new AutosuggestDataProviderResult<CultureInfo>
{
Data = CultureInfo.GetCultures(CultureTypes.AllCultures)
.Where(c => c.LCID != 4096)
.Where(c => c.EnglishName?.Contains(request.UserInput, StringComparison.CurrentCultureIgnoreCase) ?? false)
.OrderBy(c => c.EnglishName)
.Take(10) // you should always limit the output to the number of items you want to be suggested
.ToList()
};
}
private async Task<CultureInfo> ResolveAutosuggestItemFromValue(int? value)
{
if (value is null)
{
return null;
}
await Task.Delay(400); // backend API speed simulation
return CultureInfo.GetCultureInfo(value.Value);
}
}
Name | Type | Description |
---|---|---|
AdditionalAttributes | IReadOnlyDictionary<string, object> |
A collection of additional attributes that will be applied to the created element. |
ChipTemplate | RenderFragment |
Chip template. |
ClearIcon | IconBase |
Icon displayed in input on selection clear button when item is selected. |
CssClass | string |
Custom CSS class to render with wrapping div. |
DataProvider | AutosuggestDataProviderDelegate<TItem> |
Method (delegate) which provides data of the suggestions. |
Delay | int? |
Debounce delay in milliseconds. |
DisplayName | string |
|
EmptyTemplate | RenderFragment |
Template to display when items are empty. |
Enabled | bool? |
When null (default), the Enabled value is received from cascading FormState .
When value is false , input is rendered as disabled.
To set multiple controls as disabled use |
GenerateChip | bool |
When true , HxChipGenerator is used to generate chip item(s). Default is true . |
Hint | string |
Hint to render after input as form-text. |
HintTemplate | RenderFragment |
Hint to render after input as form-text. |
InputCssClass | string |
Custom CSS class to render with the input element. |
InputGroupEndTemplate | RenderFragment |
Input-group at the end of the input. Hides the search icon when used! |
InputGroupEndText | string |
Input-group at the end of the input. Hides the search icon when used! |
InputGroupStartTemplate | RenderFragment |
Input-group at the beginning of the input. |
InputGroupStartText | string |
Input-group at the beginning of the input. |
InputSize | InputSize? |
Size of the input. |
ItemFromValueResolver | Func<TValue, Task<TItem>> |
Returns corresponding item for (select) Value. |
ItemTemplate | RenderFragment<TItem> |
Template to display item.
When not set, TextSelector is used. |
Label | string |
Label text. |
LabelCssClass | string |
Custom CSS class to render with the label. |
LabelTemplate | RenderFragment |
Label content. |
LabelType | LabelType? |
Label type. |
MinimumLength | int? |
Minimal number of characters to start suggesting. |
Placeholder | string |
Short hint displayed in the input field before the user enters a value. |
SearchIcon | IconBase |
Icon displayed in input when no item is selected. |
Settings | AutosuggestSettings |
Set of settings to be applied to the component instance (overrides HxAutosuggest.Defaults , overridden by individual parameters). |
TextSelector | Func<TItem, string> |
Selects text to display from item.
When not set ToString() is used. |
ValidationMessageMode | ValidationMessageMode? |
Specifies how the validation message should be displayed. Default is ValidationMessageMode.Regular , you can override application-wide default for all inputs in HxInputBase.Defaults . |
Value | TValue |
Value of the input. This should be used with two-way binding. |
ValueChanged | EventCallback<TValue> |
A callback that updates the bound value. |
ValueExpression | Expression<Func<TValue>> |
An expression that identifies the bound value. |
ValueSelector | Func<TItem, TValue> |
Selects value from item.
Not required when TValue is same as TItem . |
Method | Returns | Description |
---|---|---|
FocusAsync() | ValueTask |
Gives focus to the input element. |
Property | Type | Description |
---|---|---|
Defaults | AutosuggestSettings |
Application-wide defaults for the HxAutosuggest and derived components. |
Name | Description | Default |
---|---|---|
--hx-autosuggest-input-close-icon-opacity | Opacity of the close icon. | .25 |
--hx-autosuggest-item-highlighted-background-color |
When HxAutosuggest.HighlightFirstSuggestion is true , then the first item receives this background color.
|
var(--bs-gray-200) |
--hx-autosuggest-dropdown-menu-height | Maximum height of results dropdown menu. | 300px |
--hx-autosuggest-dropdown-menu-width | Width of results dropdown menu. | 100% |