Search results widget
The search result widget displays search results to the user on a search result page. It contains the actual search results as well as filter, view options and pagination controls.
See the example in Codesandbox.
Configuration
The following options can be configured when creating the search results widget.
Name | Type | Default | Description |
---|---|---|---|
|
| Define a list of active filters. The configuration is specified as an array of Filter properties. | |
|
|
| Specific configuration options. |
Filter
The Filter
object defines options to allow refining of search results. The options vary from a given type but all types share following basic properties:
Name | Type | Default | Description |
---|---|---|---|
|
|
| The name of a given Filter. |
|
|
| Title of the filter. |
|
| Type of the filter. |
List
Properties available for list
filters.
Name | Type | Default | Description |
---|---|---|---|
|
|
| A field in schema, used if |
|
|
| Map to a field which aims to perform a count aggregate. |
|
|
| Dictionary of name -> filter pairs, used if |
|
|
| Multiple selections allowed. |
|
|
| Whether the response of the field is an array. This setting is only applicable if |
|
|
| A group name, for grouping multiple filters together using ARRAY_MATCH |
|
|
| Maximum number of items to initially show. Maximum is 100. |
|
|
| If true, display an input for searching through items. |
|
|
| Placeholder for search input. |
|
|
| Pin selected items to the top of the list. |
|
|
| How to sort the items. 'alpha' stands for 'alphanumeric' meaning to sort the items based on label alphabetically, 'count' to sort based on count, 'none' to skip the sorting process. |
|
|
| Whether to sort in ascending order. |
|
|
| How to format the values. |
|
|
| Hide total items count. |
|
|
| Selected options will be displayed as filter options. Used if |
|
|
| Selected options will not be displayed as filter options. Used if |
|
|
| If specified, only options that exactly match the prefix will be shown. The prefix will be removed from the option displayed. Used if |
|
| 'normal-case' | Control the capitalization of text options. |
By default, it will perform a count aggregate over the field brand
to return a list of filter options. The list can be filtered via includes
, excludes
or prefixFilter
.
However, we can manually specify the options:
See the example in Codesandbox.
Color
The color filter does not support any custom properties.
Rating
Properties available for rating
filters.
Name | Type | Default | Description |
---|---|---|---|
|
|
| Hide total items count. |
Tabs
Properties available for tabs
filters.
Name | Type | Default | Description |
---|---|---|---|
|
|
| A field in schema, used if |
|
|
| Map to a field which aims to perform a count aggregate. |
|
|
| Dictionary of name -> filter pairs. |
|
|
| Multiple selections allowed. |
|
|
| Whether the response of the field is an array. This setting is only applicable if |
|
|
| A group name, for grouping multiple filters together using ARRAY_MATCH |
|
|
| Maximum number of items to initially show. Maximum is 100. |
|
|
| How to sort the items. |
|
|
| Whether to sort in ascending order. |
|
|
| How to format the values. |
|
|
| Hide total items count. |
|
|
| Selected options will be displayed as filter options. Used if |
|
|
| Selected options will not be displayed as filter options. Used if |
|
|
| If specified, only options that exactly match the prefix will be shown. The prefix will be removed from the option displayed. Used if |
|
|
| Control the capitalization of text options. |
See the example in Codesandbox.
Select
Properties available for select
filters.
Name | Type | Default | Description |
---|---|---|---|
|
|
| A field in schema, used if |
|
|
| Map to a field which aims to perform a count aggregate. |
|
|
| Dictionary of name -> filter pairs. |
|
|
| Multiple selections allowed. |
|
|
| Whether the response of the field is an array. This setting is only applicable if |
|
|
| A group name, for grouping multiple filters together using ARRAY_MATCH |
|
|
| Maximum number of items to initially show. Maximum is 100. |
|
|
| How to sort the items. 'alpha' stands for 'alphanumeric' meaning to sort the items based on label alphabetically, 'count' to sort based on count, 'none' to skip the sorting process. |
|
|
| Whether to sort in ascending order. |
|
|
| How to format the values. |
|
|
| Hide total items count. |
|
|
| Selected options will be displayed as filter options. Used if |
|
|
| Selected options will not be displayed as filter options. Used if |
|
|
| If specified, only options that exactly match the prefix will be shown. The prefix will be removed from the option displayed. Used if |
|
|
| Control the capitalization of text options. |
See the example in Codesandbox.
Range
Properties available for range
filters.
Name | Type | Default | Description |
---|---|---|---|
|
|
| A field in schema, used if count = true. |
|
|
| A group name, for grouping multiple filters together using ARRAY_MATCH |
|
|
| The initial value. |
|
|
| If true, set value for min and max from the backend response. |
|
|
| The min value of the filter. |
|
|
| The max value of the filter. |
|
|
| How to format the values. |
|
|
| Show inputs. |
|
|
| An array of custom steps to use. This will override step. |
|
|
| The interval to show small ticks. |
|
|
| An array of custom ticks to use. This will override tick. |
By default, the max
and min
value are set from an aggregation operation. However, we can manually define the min-max range and the initial value.
See the example in Codesandbox.
Search result options
Name | Type | Default | Description |
---|---|---|---|
|
| Set to true or false to toggle the display of the View (grid or list) selector | |
|
|
| Options of ResultsPerPage component used to capture user input for how many results displayed per page. See ResultsPerPage props. |
|
|
| Options of Sorting component used to capture user input on how to sort search results. See Sorting props. |
| `InputProps & {hide: boolean, position: 'top' \ | 'aside'}` |
|
|
|
| Options of Results component displaying result response from a search query. See Results props. |
|
|
| Options of Pagination component allowing the user to change the current page. See Pagination props. |
|
| Control the display of the search results. While the |
Standard properties
Exclusive props if mode is standard
.
Name | Type | Default | Description |
---|---|---|---|
|
|
| Keep the search state in the URL if the option is not |
|
|
| A key -> value pair object maps the URL params to initial values for the search. |
See the example in Codesandbox.
Overlay properties
Exclusive props if mode is overlay
.
Name | Type | Default | Description |
---|---|---|---|
|
|
| A single or a list of CSS selector of elements used to trigger the overlay dialog to open. |
|
|
| If defined, it will take the current value of the input to be the inital search query after the overlay dialog is open. |
|
|
| ARIA label for the |
|
|
| Options for the dialog window holding the search results interface. See Modal props. |
See the example in Codesandbox.
Last updated