Autocomplete Component

Owned by Jordan Kasper (Deactivated)
Last updated: Sept 01, 2022
6 min read

Overview

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

Selector

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

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.

Event Binding Attributes

Categories

Attribute Name

Attribute Value

Attribute Name

Attribute Value

hawksearch-category-field

categories.results[...].field

hawksearch-category-value

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

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

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

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

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>