Autocomplete

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