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