<p>To enable search within facets the following attributes must be set on the facet <code>search-enabled="true"</code>. The following attributes can be set on either the facet-list tag or the facet tag to enable search within <code>platform</code> and <code>query</code>.</p> <p>If using a string field such as <code>facet_field_s</code> then you should add the attribute <code>facet-field</code> to your facet tag with the tokenized version of that field eg. <code>facet-field="facet_field_t"</code>, for more information see the <code>search-enabled</code> and <code>facet-field</code> attributes.</p> </div></div> <h2 id="usage">Usage</h2> <div class="usage">as element:<pre class="prettyprint linenums"><search:facet [response="{string}"] [facet-name="{string}"] [facet="{expression}"] [title="{string}"] [show="{string}"] [show-more="{string}"] [max-characters="{string}"] [select="{string}"] [platform="{string}"] [query="{string}"] [search-enabled="{boolean}"] [facet-field="{string}"] [collapsible="{boolean}"] [show-empty="{boolean}"] [collapsed-by-default="{boolean}"] [show-more-label="{string}"] [show-less-label="{string}"] [show-count="{boolean}"] [action="{string}"] [count-number="{string}"] [date-format="{string}"] [measure="{string}"] [when-field="{string}"] [exclude="{boolean}"]> </search:facet></pre> <h3 id="usage_directive-info">Directive info</h3> <div class="directive-info"><ul><li>This directive creates new scope.</li> </ul> </div> <h4 id="usage_directive-info_parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>response <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>The name of the response to use.</p> </div></td></tr><tr><td>facet-name <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Facet name to use from the response object</p> </div></td></tr><tr><td>facet <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>A facet object to display</p> </div></td></tr><tr><td>title <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>The title of the facet to display, defaults to the name of the facet</p> </div></td></tr><tr><td>show <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>The number of filters to show by default</p> </div></td></tr><tr><td>show-more <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>The number of extra filters to display when the show more link is clicked</p> </div></td></tr><tr><td>max-characters <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Limit display value to a certain number of characters, adding '…​' if max-characters is exceeded.</p> </div></td></tr><tr><td>select <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>How to render each FacetFilter.</p> </div><br/>Valid values:-<ul><li><div class="tk-rgrid-g"><div class="tk-rgrid-u-md-3-24 tk-rgrid-u-1"><strong>click</strong></div><div class="tk-rgrid-u-md-21-24 tk-rgrid-u-1 property-description"><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>User selects a filter by clicking the value;</p> </div> <strong>(default)</strong></div></div></li><li><div class="tk-rgrid-g"><div class="tk-rgrid-u-md-3-24 tk-rgrid-u-1"><strong>multiselect</strong></div><div class="tk-rgrid-u-md-21-24 tk-rgrid-u-1 property-description"><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Supports selecting multiple filters that get combined with an 'OR'.</p> </div></div></div></li><li><div class="tk-rgrid-g"><div class="tk-rgrid-u-md-3-24 tk-rgrid-u-1"><strong>toggle</strong></div><div class="tk-rgrid-u-md-21-24 tk-rgrid-u-1 property-description"><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Only allows one filter to be selected at a time but shows unselected filters and counts</p> </div></div></div></li><li><div class="tk-rgrid-g"><div class="tk-rgrid-u-md-3-24 tk-rgrid-u-1"><strong>multiselect-instant</strong></div><div class="tk-rgrid-u-md-21-24 tk-rgrid-u-1 property-description"><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Supports selecting multiple filters that get combined with an 'OR', filters will be applied automatically.</p> </div></div></div></li></ul></td></tr><tr><td>platform <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>The name of the platform to use for search within the facet.</p> </div></td></tr><tr><td>query <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Nome of the query to be used.</p> </div></td></tr><tr><td>search-enabled <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Whether to enable search on the facet. If no query or platform is defined on the facet or facet-list it will enable the user to search through the filters that have been returned in the response. If a platform and query is defined on the facet or facet-list then it will search for filters in the search index. (Requires a tokenized field, if not using a tokenized field, if not using a tokenized field please see facet-field).</p> </div></td></tr><tr><td>facet-field <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>When this option is provided, the user will have the option to search values within the facet using the named field to search against. The named field should be tokenized. Example usage is if you are using facet_field_s (a string facet/field) as your facet you need to provide the tokenized version of that field for search against, e.g. facet_field_t.</p> </div></td></tr><tr><td>collapsible <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Set to true if the facet should be collapsible in the list of facets.</p> </div> <p><em>(default: false)</em></p></td></tr><tr><td>show-empty <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>If true then the facet will also output empty filters where count is zero.</p> </div> <p><em>(default: false)</em></p></td></tr><tr><td>collapsed-by-default <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Set to true if this facet should be collapsed by default.</p> </div> <p><em>(default: false)</em></p></td></tr><tr><td>show-more-label <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Text to show on the link that shows more filters (expandable mode).</p> </div> <p><em>(default: "Show more")</em></p></td></tr><tr><td>show-less-label <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Text to show on the link that shows fewer filters (expandable mode).</p> </div> <p><em>(default: "Show less")</em></p></td></tr><tr><td>show-count <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Whether to add metadata with frequency counts etc.</p> </div> <p><em>(default: true)</em></p></td></tr><tr><td>action <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Alternative Action to submit the query parameters to - defaults to current page.</p> </div></td></tr><tr><td>count-number <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Specify how the number representing the count should be formatted.</p> </div><br/>Valid values:-<ul><li><div class="tk-rgrid-g"><div class="tk-rgrid-u-md-3-24 tk-rgrid-u-1"><strong>plain</strong></div><div class="tk-rgrid-u-md-21-24 tk-rgrid-u-1 property-description"><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Displays the number without any formatting.</p> </div></div></div></li><li><div class="tk-rgrid-g"><div class="tk-rgrid-u-md-3-24 tk-rgrid-u-1"><strong>formatted</strong></div><div class="tk-rgrid-u-md-21-24 tk-rgrid-u-1 property-description"><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Formatted means that the number is comma formatted (2,000,000 for 2000000).</p> </div> <strong>(default)</strong></div></div></li><li><div class="tk-rgrid-g"><div class="tk-rgrid-u-md-3-24 tk-rgrid-u-1"><strong>rounded</strong></div><div class="tk-rgrid-u-md-21-24 tk-rgrid-u-1 property-description"><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Rounded means the number is represented in a short format (2k for ~2000).</p> </div></div></div></li></ul></td></tr><tr><td>date-format <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>How to format the date. See <a href="#/api/lightning.filter:dateFormat">date format filter</a> for valid formats.</p> </div></td></tr><tr><td>measure <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>What fact to use as an alternative to count as quantiative value for a filter.</p> </div></td></tr><tr><td>when-field <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>Comma-separated list of field names. When one matches this facet representation will be used during an iteration.</p> </div></td></tr><tr><td>exclude <div><em>(optional)</em></div></td><td><a href="" class="label type-hint type-hint-boolean">boolean</a></td><td><div class="lightning-directive-page lightning-directive-searchfacet-page"><p>On filter hover, displays an icon to allow the user to add an exclusion filter for the value.</p> </div> <p><em>(default: false)</em></p></td></tr></tbody></table></div> <h2 id="example">Example</h2> <div class="example"><div class="lightning-directive-page lightning-directive-searchfacet-page"><h4 id="example_source">Source</h4> <div source-edit="lightning" source-edit-deps="angular.js scripts.js" source-edit-html="index.html-45" source-edit-css="styles.css" source-edit-js="scripts.js" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div> <div class="tabbable"><div class="tab-pane" title="index.html"> <pre class="prettyprint linenums" ng-set-text="index.html-45" ng-html-wrap-loaded="lightning angular.js scripts.js"></pre> <script type="text/ng-template" id="index.html-45"> <div ng-controller="ExampleController"> <search:facet-list response="response" styling="facet-list facet-list-step facet-list-wrappedheader facet-list-wrappedheader-noborder"> <search:facet facet-name="test1" title="First Pass Files" collapsible="true" show="1" show-more="10"></search:facet> <search:facet facet-name="test2" title="Second Pass Files"></search:facet> <search:facet facet-name="empty" title="Empty Facet"></search:facet> <search:facet facet-name="date" title="Date Facet With Switches" date-format="fullDate" select="multiselect" styling="switches"></search:facet> <search:facet facet-name="date2" title="Date Facet With Checkboxes" date-format="fullDate" select="multiselect"></search:facet> <search:facet facet-name="date3" title="Date Facet With Format" date-format="dd/MM/yyyy"></search:facet> </search:facet-list>