HxSmartComboBox #

Smart ComboBox is an AI upgrade to the traditional combo box.
Traditional combo boxes suggest values only based on exact substring matches. Smart ComboBox upgrades this by suggesting semantic matches (i.e., options with the most closely related meanings). This is much more helpful for users who don't know/remember the exact predefined string they are looking for.
HxSmartComboBox derives from SmartComboBox, a component created by the Microsoft Blazor team. It extends the original component with Bootstrap styling and Hx-component features.

Basic usage #

Start typing an expense category, AI will offer most appropriate categories from predefined list.
<HxSmartComboBox Label="Expense category"
				 Url="api/SmartComboBox/expense-category"
				 Hint="Start typing an expense category, AI will offer most appropriate categories from predefined list."
				 @bind-Value="expenseCategory" />

@code {
	private string expenseCategory;
}

API #

Parameters #

Name Type Description
UrlREQUIRED string API endpoint that Smart ComboBox will call to get suggestions.
AdditionalAttributes IReadOnlyDictionary<string, object> A collection of additional attributes that will be applied to the created element.
ChipTemplate RenderFragment
CssClass string
DisplayName string Gets or sets the display name for this field.
This value is used when generating error messages when the input value fails to parse correctly.
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 HxFormState.
GenerateChip bool
Hint string
HintTemplate RenderFragment
InputCssClass string
InputGroupEndTemplate RenderFragment
InputGroupEndText string
InputGroupStartTemplate RenderFragment
InputGroupStartText string
InputMode InputMode? Hint to browsers as to the type of virtual keyboard configuration to use when editing.
The default is null (not set).
InputSize InputSize? Size of the input.
Label string
LabelCssClass string
LabelTemplate RenderFragment
LabelType LabelType?
MaxLength int? The maximum number of characters (UTF-16 code units) that the user can enter.
If the parameter value isn't specified, the MaxLengthAttribute of the Value is checked and used.
If not specified either, the user can enter an unlimited number of characters.
MaxSuggestions int Maximum number of suggestions offered. Default is 10.
Placeholder string Placeholder for the input.
Settings InputTextSettings Set of settings to be applied to the component instance (overrides HxInputText.Defaults, overridden by individual parameters).
SimilarityThreshold float Minimal similarity coefficient for an item to be offered. Default is 0.5.
ValidationMessageMode ValidationMessageMode?
Value string Value of the input. This should be used with two-way binding.
ValueChanged EventCallback<string> A callback that updates the bound value.
ValueExpression Expression<Func<string>> An expression that identifies the bound value.

Methods #

Method Returns Description
FocusAsync() ValueTask

Static properties #

Property Type Description
Defaults InputTextSettings Application-wide defaults for the HxInputFile and derived components.
Full documentation and demos: https://havit.blazor.eu/components/HxInputText.
An unhandled error has occurred. Reload 🗙