HxSearchBox #
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.
HxSearchBoxallows you to customize item rendering,HxSearchBoxsupports free-text query,HxSearchBoxdoes not supportValue-binding to model,HxSearchBoxdoes not support validation.
Basic usage #
Last selected item:
Last triggered text-query:
Suggestions only #
You can disable free-text query by setting AllowTextQuery="false". Only suggestions will be allowed.
Last selected item:
Initial suggestions #
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.
Last selected item:
Consider caching the initial suggestions to avoid unnecessary roundtrips for repetitive
You might want to tweak the
In such case, consider using additional Debouncer for regular suggestions to avoid unnecessary roundtrips on every keystroke.
DataProvider calls.You might want to tweak the
Delay parameter to disable/minimize the delay before the initial suggestions are displayed.In such case, consider using additional Debouncer for regular suggestions to avoid unnecessary roundtrips on every keystroke.
Text query without suggestions #
You may want to include a straightforward search box to initiate text-based searches. No suggestions, just visual cues to assist the user.
Last triggered text-query:
API #
Parameters #
| 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 |
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) |
| --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) |