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.

  • 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.

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:

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:


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 AllowTextQuery="true").

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)
An unhandled error has occurred. Reload 🗙