Overview
The Recent Searches Facet Component displays a list of the five most recent searches performed by a user.
Selector
The selector for this component is <hawksearch-related-searches-facet>.
Data Model
The Facet data model is exposed to the Handlebars template:
type FacetType =
| 'checkbox'
| 'color'
| 'date-range'
| 'link'
| 'numeric-range'
| 'range-slider'
| 'recent-searches'
| 'related-searches'
| 'search'
| 'size'
| 'tabs'
| 'unsupported';
interface FacetValueColor {
name: string;
hex?: string;
imageUrl?: string;
}
interface FacetValue {
title: string;
imageUrl?: string;
value?: string;
color?: FacetValueColor;
count?: number;
level?: number;
selected?: boolean;
excluded?: boolean;
children?: Array<FacetValue>;
}
interface FacetRange<T> {
type: string;
min: T;
max: T;
start: T;
end: T;
}
interface DateFacetRange extends FacetRange<Date> {
type: 'date';
}
interface NumericFacetRange extends FacetRange<number> {
type: 'numeric';
}
interface Facet {
id: number;
type: FacetType;
title: string;
values?: Array<FacetValue>;
field: string;
collapsible: boolean;
collapsed?: boolean;
range?: DateFacetRange | NumericFacetRange;
searchable?: boolean;
searchWithin?: string;
tooltip?: string;
truncateThreshold?: number;
visible: boolean;
}
For more information, see Search Models.
Event Binding Attributes
Attribute Name | Attribute Value |
|---|---|
hawksearch-query |
|
When an element with this attribute is clicked, the click will be tracked and a new search will be executed with that query.
Default Template
<div class='related-searches-facet'>
<ul class='related-searches-facet__list'>
{{#each values}}
<li class='related-searches-facet__list__item'>
<a hawksearch-query='{{title}}' class='facet__value'>{{title}}</a>
</li>
{{/each}}
</ul>
</div>