HxSearchBox
A search input component witch automatic suggestions, initial dropdown template and free-text queries support.
Basic usage #
Triggered text-query:
Bound text-query:
Although
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.
API
Parameters
| 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 |
Static properties
| Property | Type | Description |
|---|---|---|
| Defaults | SearchBoxSettings |
Application-wide defaults for the HxSearchBox and derived components. |
CSS Variables
| 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) |