Class AutocompleteComponent

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

Tag

The tag for this component is <hawksearch-autocomplete>.

Event-Binding Attributes

Categories

Name	Value
hawksearch-category-field	field
hawksearch-category-field	value

Content Results

Name	Value
hawksearch-content	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

Name	Value
hawksearch-product	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.

Query Results (Popular Queries)

Name	Value
hawksearch-query	query

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.

View All Results

Name	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

The following is the default Handlebars template for this component. To create a custom template, it is recommended to use this as a starting point.

<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>
                                {{#if rating}}
                                    <hawksearch-rating rating="{{rating}}"></hawksearch-rating>
                                {{/if}}
                                {{#unless (eq price undefined)}}
                                    <div class="autocomplete__product__price" itemprop="offers" itemtype="http://schema.org/Offer" itemscope>
                                        {{#if (lt salePrice price)}}
                                            <span class="autocomplete__product__price__original">{{currency price}}</span>
                                            <span class="autocomplete__product__price__current" itemprop="price">{{currency salePrice}}</span>
                                        {{else}}
                                            <span class="autocomplete__product__price-__current" itemprop="price">{{currency price}}</span>
                                        {{/if}}
                                    </div>
                                {{/unless}}
                                <hawksearch-variant-selector></hawksearch-variant-selector>
                            </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 productSuggestedQueries.results.length}}
                    <span class="autocomplete__title autocomplete__title--queries">{{productSuggestedQueries.title}}</span>
                    <ul class="autocomplete__list">
                        {{#each productSuggestedQueries.results}}
                            <li>
                                <a hawksearch-query="{{query}}" href="{{url}}">{{query}}</a>
                            </li>
                        {{/each}}
                    </ul>
                {{/if}}
                {{#if contentSuggestedQueries.results.length}}
                    <span class="autocomplete__title autocomplete__title--queries">{{contentSuggestedQueries.title}}</span>
                    <ul class="autocomplete__list">
                        {{#each contentSuggestedQueries.results}}
                            <li>
                                <a hawksearch-query="{{query}}" href="{{url}}">{{query}}</a>
                            </li>
                        {{/each}}
                    </ul>
                {{/if}}
                {{#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>
Copy