Overview

The Autocomplete template displays a preview of search results after a user begins to type a query in the Search component.

Data Model

This component is bound to an instance of AutocompleteResponse. All properties from this object are made available to the Handlebars template along with the AutocompleteItemType enum.

interface AutocompleteResponse {
    query: string;
    categories: AutocompleteCategories;
    content: AutocompleteContent;
    products: AutocompleteProducts;
    queries: AutocompleteQueries;
    totalRecords: number;
    viewAllText: string;
}

enum AutocompleteItemType {
    Search = 1,
    Category = 2,
    Product = 3,
    Content = 4
}

Event Binding Attributes

Content Results

Attribute Name	Attribute Value
hawksearch-content	`content.results[...].id`

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	`product.results[...].id`

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	`queries.results[...].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

<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>

Attribute Name	Attribute Value
hawksearch-category-field	`categories.results[...].field`
hawksearch-category-value	`categories.results[...].value`

Autocomplete Component