A search input component witch automatic suggestions, initial dropdown template and free-text queries support.
HxSearchBox
supports input groups, ending input groups conflict with the search icon, therefore, when InputGroupEndText
or InputGroupEndTemplate
are set, the search icon is not displayed.
Name | Type | Description |
---|---|---|
AllowTextQuery | bool |
Indicates whether text-query mode is enabled (accepts free text in addition to suggested items). |
ClearIcon | IconBase |
Icon of the input, when text is written allowing the user to clear the text. |
CssClass | string |
Additional css classes for the dropdown. |
DataProvider | SearchBoxDataProviderDelegate<TItem> |
Method (delegate) which provides data of the suggestions. |
DefaultContentTemplate | RenderFragment |
Rendered when no input is entered (i.e. initial state). |
Delay | int? |
Debounce delay in miliseconds. Default is 300 ms. |
DropdownOffset | ValueTuple<int, int> |
Offset between the dropdown and the input. |
Enabled | bool |
Allows you to disable the input. Default is true . |
InputCssClass | string |
Additional CSS classes for the search box input. |
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? |
Input size of the input field. |
ItemCssClass | string |
Additional CSS classes for the items in the dropdown menu. |
ItemIconSelector | Func<TItem, IconBase> |
Selector to display icon from data item. |
ItemSubtitleSelector | Func<TItem, string> |
Selector to display item subtitle from data item. |
ItemTemplate | RenderFragment<TItem> |
Template for the item content. |
ItemTitleSelector | Func<TItem, string> |
Selector to display item title from data item. |
Label | string |
Label of the input field. |
LabelType | LabelType |
Label type of the input field. |
MinimumLength | int? |
Minimum lenght to call the data provider (display any results). Default is 2 . |
NotFoundTemplate | RenderFragment |
Rendered when the DataProvider doesn't return any data. |
OnItemSelected | EventCallback<TItem> |
Occurs, when any of suggested items (other than plain text-query) is selected. |
OnTextQueryTriggered | EventCallback<string> |
Raised, when the enter key is pressed or when the text-query item is selected in the dropdown menu.
(Does not trigger when AllowTextQuery is false .) |
Placeholder | string |
Placeholder text for the search input. |
SearchIcon | IconBase |
Icon of the input, when no text is written. |
Settings | SearchBoxSettings |
Set of settings to be applied to the component instance (overrides HxSearchBox.Defaults , overriden by individual parameters). |
TextQuery | string |
Text written by the user (input text). |
TextQueryChanged | EventCallback<string> |
|
TextQueryItemTemplate | RenderFragment<string> |
Template for the text-query item content (requires ). |
Property | Type | Description |
---|---|---|
Defaults | SearchBoxSettings |
Application-wide defaults for the HxSearchBox and derived components. |
Name | Description | Default |
---|---|---|
--hx-search-box-item-icon-margin | Item icon margin. | 0 .5rem 0 0 |
--hx-search-box-item-icon-font-size | Item icon font-size. | inherit |
--hx-search-box-item-title-font-size | Item title font-size. | inherit |
--hx-search-box-item-title-color | Item title color. | inherit |
--hx-search-box-item-subtitle-font-size | Item subtitle font-size. | .75rem |
--hx-search-box-item-subtitle-color | Item subtitle color. | var(--bs-secondary) |