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-recent-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	`string`

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='recent-searches-facet'>
    <ul class='recent-searches-facet__list'>
        {{#each values}}
            <li class='recent-searches-facet__list__item'>
                <a hawksearch-query='{{title}}' class='facet__value'>{{title}}</a>
            </li>
        {{/each}}
    </ul>
</div>