HxSearchBox #
A search input component witch automatic suggestions, initial dropdown template and free-text queries support.
Due to breaking change in Bootstrap 5.2, the keyboard navigation stopped working for dropdowns triggered from
input (the Up and Down keys).
As an experimental feature we added our own keyboard navigation routines to the affected components. This might be subject to future change.
You can check the progress here: https://github.com/havit/Havit.Blazor/issues/348.
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:
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) |