| Table of Contents |
|---|
Overview
The Autocomplete template displays a preview of search results after a user begins to type a query in the Search component.
...
Data Model
The following data is made available to the Handlebars template:
All properties of the Autocomplete Response
AutocompleteItemType enum
| Code Block | ||
|---|---|---|
| ||
template({
...this.data,
AutocompleteItemType: AutocompleteItemType
}); |
Event Binding Attributes
Categories
Attribute Name | Attribute Value |
|---|---|
hawksearch-category-field |
|
hawksearch-category-value |
|
The above attributes must be present on the same element. When an element with these attributes is clicked, a new search will be executed with the selected attribute selected by default.
Content Results
Attribute Name | Attribute Value |
|---|---|
hawksearch-content |
|
When an element with this attribute is clicked, the click will be tracked and the user will be redirected to the page corresponding to that content item.
Product Results
Attribute Name | Attribute Value |
|---|---|
hawksearch-product |
|
When an element with this attribute is clicked, the click will be tracked and the user will be redirected to the page corresponding to that product.
Query Results (Popular Searches)
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.
View All Results
Attribute Name | Attribute Value |
|---|---|
hawksearch-view-all |
When an element with this attribute is clicked, a new search will be executed with the query entered in the search box.
Default Template
| Code Block | ||||
|---|---|---|---|---|
| ||||
<div class='autocomplete'>
<div class='row'>
{{#if products.results.length}}
<div class='column column--12 column-md--8'>
<span class='autocomplete__title autocomplete__title--products'>{{products.title}}</span>
<div class='row autocomplete__products'>
{{#each products.results}}
<div class='column column--12 column-sm--4'>
<div class='autocomplete__product'>
<a hawksearch-product='{{id}}' href='{{url}}' class='autocomplete__product__image'>
<img hawksearch-image src='{{imageUrl}}' alt='' />
</a>
<span class='autocomplete__product__title'>
<a hawksearch-product='{{id}}' href='{{url}}'>{{html title}}</a>
</span>
</div>
</div>
{{/each}}
</div>
</div>
{{/if}}
{{#if (or categories.results.length content.results.length queries.results.length)}}
<div class='column column--12 column-md--4'>
{{#if categories.results.length}}
<span class='autocomplete__title autocomplete__title--categories'>{{categories.title}}</span>
<ul class='autocomplete__list'>
{{#each categories.results}}
<li>
<a hawksearch-category-field='{{field}}' hawksearch-category-value='{{value}}' href='{{url}}'>{{html title}}</a>
</li>
{{/each}}
</ul>
{{/if}}
{{#if content.results.length}}
<span class='autocomplete__title autocomplete__title--content'>{{content.title}}</span>
<ul class='autocomplete__list'>
{{#each content.results}}
<li>
<a hawksearch-content='{{id}}' href='{{url}}'>{{html title}}</a>
</li>
{{/each}}
</ul>
{{/if}}
{{#if queries.results.length}}
<span class='autocomplete__title autocomplete__title--queries'>{{queries.title}}</span>
<ul class='autocomplete__list'>
{{#each queries.results}}
<li>
<a hawksearch-query='{{query}}' href='{{url}}'>{{query}}</a>
</li>
{{/each}}
</ul>
{{/if}}
</div>
{{/if}}
</div>
<div class='autocomplete__view-all'>
<a hawksearch-view-all>{{viewAllText}}</a>
</div>
</div> |