A search input component witch automatic suggestions, initial dropdown template and free-text queries support.
HxSearchBox
component is similar to HxAutosuggest component, but it is designed to be used for searching.
HxSearchBox
allows you to customize item rendering,HxSearchBox
supports free-text query,HxSearchBox
does not support Value
-binding to model,HxSearchBox
does not support validation.You can disable free-text query by setting AllowTextQuery="false"
. Only suggestions will be allowed.
You can provide initial suggestions to the user by setting the MinimumLength="0"
. This is useful when you want to display some suggestions to the user before he starts typing.
DataProvider
calls.Delay
parameter to disable/minimize the delay before the initial suggestions are displayed.You may want to include a straightforward search box to initiate text-based searches. No suggestions, just visual cues to assist the user.
Name | Type | Description |
---|---|---|
AllowTextQuery | bool |
Indicates whether text-query mode is enabled (accepts free text in addition to suggested items). Default is true . |
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 milliseconds. 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. |
InputGroupCssClass | string |
Custom CSS class to render with input-group span. |
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. |
ItemSelectionBehavior | SearchBoxItemSelectionBehavior? |
Behavior when the item is selected. |
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 length 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 , overridden 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) |
--hx-search-box-dropdown-menu-height | Maximum height of results dropdown menu. | 300px |
--hx-search-box-item-highlighted-background-color | Background color of an item when highlighted. | var(--bs-tertiary-bg) |