Overview
The Linked List Facet component renders a hyperlink for each value.
Selector
The selector for this component is <hawksearch-link-list-facet>
.
Data Model
The following data model is exposed to the Handlebars template:
interface LinkListFacetValue extends FacetValue { visible: boolean; }
{ id: string; field: string | undefined; values: Array<LinkListFacetValue>; showToggle: boolean; toggleText: string; expanded: boolean | undefined; }
For more information, see Search Models.
Event Binding Attributes
This component supports the following attributes which are common to all Facet Type Components:
Attribute Name Attribute Value hawksearch-facet-value When a checkbox input element with this attribute is checked or unchecked, the value of that element will be added or removed from the search request as appropriate. For non-input elements, the attribute value will be used instead of a form element value. Attribute Name Attribute Value hawksearch-facet-value-exclude When an element with this attribute is clicked, search results with the corresponding attribute value will be excluded from search results. Attribute Name Attribute Value hawksearch-facet-value-include When an element with this attribute is clicked, search results with the corresponding attribute value will no longer be excluded from search results. Elements with this attribute value should only be displayed for facet values that are excluded. Attribute Name Attribute Value hawksearch-facet-value-toggle When an element with this attribute is clicked, child facet values will be displayed or hidden as appropriate. This attribute should only be used for facets that support nested values. Attribute Name Attribute Value hawksearch-facet-toggle When an element with this attribute is clicked, facet values beyond the toggle threshold will be displayed or hidden as appropriate.string
(if applicable)string
string
Default Template
<div class='link-list-facet'> <ul class='link-list-facet__list'> {{#each values}} {{#if visible}} <li class='link-list-facet__list__item'> <a hawksearch-facet-value='{{value}}' class='facet__value'> <span class='facet__value__title'>{{title}}</span> <span class='facet__value__count'>({{count}})</span> </a> </li> {{/if}} {{/each}} </ul> {{#if showToggle}} <a hawksearch-facet-toggle class='facet__toggle'>{{toggleText}}</a> {{/if}} </div>