​
Description

The Header Search directive

​
Usage

as element: 
<search:box
       response="{Object}"
       [query="{string}"]
       [action="{string}"]
       [placeholder="{string}"]
       [button-label="{string}"]
       [delay="{number}"]
       [platform="{string}"]
       [size="{string}"]
       [social="{boolean}"]
       [search-within-checkbox="{boolean}"]
       [search-within-label="{boolean}"]
       [search-within-default-value="{boolean}"]
       [min-length="{number}"]
       [pre-search="{function}"]>
</search:box>

​
Parameters

ParamTypeDetails
responseObjectA response object
query (optional)stringThe name of the query object
action (optional)stringPage the search should take place on, results will not change automatically when an action is set.
placeholder (optional)stringPlaceholder for the search box
button-label (optional)stringLabel of the button.
delay (optional)numberThe delay before searching, not applicable if an action is set or instant search is being used. If a delay is greater then 1, results will load instantly on the page.
platform (optional)stringThe platform to use for social search
size (optional)stringThe size of the search box (tiny, small, large, huge, massive)
social (optional)booleanWhether to enable the social features of the search header. Defaults to false. If you require a customized Bookmark List Tag or Saved Query List Tag you can add your own inside the search box tag and these will be used instead.
search-within-checkbox (optional)booleanShow the ‘search within’ option as a checkbox. This enables the query to retain the filters already applied when checked. If not checked the search is reset when a query is entered and the form submitted. If you want this functionality but don’t want a checkbox showing, you can use this attribute set to be false, and set search-within-default-value to be true - this uses a hidden field instead of a checkbox.
search-within-label (optional)booleanThe label for the ‘search within’ checkbox.
search-within-default-value (optional)booleanWhether to enable ‘search within’ by default. The default is option is ‘false’.
min-length (optional)numberThe number of characters before a search is performed, only applicable for instant-results, query suggestions, advanced search or when a delay without an action. Default: 2
pre-search (optional)functionCallback function that will be called on a search submit before the request is sent, receives the current URL state as a parameter that can be updated.

​
Example

​
Source

<h3 id="example_search">Search</h3>
<search:box></search:box>
<hr />
<h3 id="example_search-with-social">Search with Social</h3>
<search:box social="true"></search:box>
<hr />
<h3 id="example_search-with-search-within">Search with Search Within</h3>
<search:box search-within-checkbox="true"></search:box>
<hr />
<h3 id="example_search-with-search-within-with-label">Search with Search Within with Label</h3>
<search:box search-within-checkbox="true" search-within-label="Keep filters?"></search:box>
<hr />
<h3 id="example_search-with-search-within-with-label-and-default">Search with Search Within with Label and Default</h3>
<search:box search-within-checkbox="true" search-within-label="Keep filters?" search-within-default-value="true"></search:box>
<hr />
<h3 id="example_search-with-search-within-with-no-checkbox">Search with Search Within with no checkbox</h3>
<search:box search-within-checkbox="false" search-within-default-value="true"></search:box>

​
Result

Result