SearchResults

The SearchResults component is a pre-defined layout for a user's search queries, filters, and the list of results they may interact with.

For more information on how to use the features and props for this component, check out the developer documentation.

The SearchResults component is comprised of three main regions: a SearchInput along the top, filters on the side, and results in the main portion of the containing Card. This layout is configured via the Grid component. Users may interact with either the SearchInput or the filters in order to produce results.

Responsive layout

When the SearchResults component is viewed on a mobile device, or a smaller screen, the layout adjusts to fit all of the necessary content. The filters column is removed to allow the results to expand to the full width of the Card. The filters are accessible via the Filters Button, which will then open a Modal for the user to modify the filters from.

The main user interaction within the SearchResults component is the SearchInput field. This input is configurable by passing SearchInput props such as onSearchChange and value to searchInputProps.

The SearchResults component requires a count which can differ from the number of results passed in. The count should be the true representation of the total number of results, even if only a subset of those results are displayed. If the count is larger than the number of results provided, and the onShowMore callback function is defined, a Show more Button will render at the end of the list. This allows user's to request more results, triggering the onShowMore function.

Results

Each result within the list must include a unique id which is displayed on-screen, a title, and a set of props used to construct a link. The result title is rendered as a Link, constructed by the link props which may include an href and configurations for previewing the result.

Additionally, each result may include a description and meta data. The meta data is displayed using the MetaList component.

Filters

The SearchResults component allows for filters to be configured that help assist a user in narrowing their results. The set of filters should include filter configuration objects that include the name of the filter, and the items that compose the filter options. Filters visually expand their options by default, though this is configurable via the expanded prop that can be set true or false on each filter.

Filters may render as either CheckboxGroups or RadioButtonGroups depending on the selectType passed in: multi-select or single-select. The multi-select type will render a CheckboxGroup whereas the single-select type will render a RadioButtonGroup. The default value is set to multi-select.

The items within a given filter will render options for the user to choose from. Each item must include a unique id, a React Node label, and a checked boolean indicating the value of the option. A name attribute represented as a string is also required in case the label provided is not in the form of plain text.

When a user interacts with the options within a filter, an onFilterChange callback function is triggered. Additional functions may be provided to either clear a single filter or clear all active filters. Each selected filter is displayed above the results list as a Selectable badge. Filters may also be cleared by dismissing these badges.

NameTypeDefaultDescription
count*numberThe number of total results related to a given search.
filters*FilterProps[]A set of filters and their current states for a given search.
results*SearchResultProps[]A set of results to render for a given search.
searchInputProps*SearchInputPropsProps related to the SearchInput.
onClearAllFilters() => voidCallback that is fired when the Clear all button is clicked.
onClearFilter(name: ) => voidCallback that is fired when the Clear button is clicked within a filter.
onFilterChange(filter: FilterEvent) => voidCallback that is fired when the value of a filter changes.
onShowMore() => voidCallback that will render a Show more button at the bottom of the results and is fired when that button is clicked.
refRef<HTMLDivElement>A ref for the wrapping element.