Example: Enabling content in autocomplete

Overview

By default, the autocomplete suggestions are using products data. In addition to it, Hawksearch provides content data that can be enabled for the suggestions list. This is achieved by extending the default template for the SearchSuggestions component and the SuggestionItem component

Steps to extend

1. Navigate to the directory of the currently active widget template (e.g. Mvc\Views\Hawksearch\Hawksearch.Default.cshtml or the relevant resource package).

2. Copy the file of the base template or select an existing one.

3. Edit the file adding or replacing the template override for the suggestion list component:

   <script id="vue-hawksearch-search-suggestions" type="x-template"> <div class="hawk-autosuggest-menu"> <template v-if="fieldFocused && (loadingSuggestions || suggestions)"> <ul class="hawk-dropdown-menu hawk-autosuggest-menu__list hawk-autosuggest-outer-list"> <template v-if="loadingSuggestions"> <li class="hawk-autosuggest-menu__item">{{ $t('Loading') }}...</li> </template> <template v-else-if="suggestions.Content.length"> <ul class="hawk-autosuggest-inner-list"> <suggestion-item v-for="item in suggestions.Content" :item="item" :key="item.Results.DocId" v-on:itemselected="onItemSeleted"></suggestion-item> </ul> </template> <template v-else> <li class="hawk-autosuggest-menu__item">{{ $t('No Results') }}</li> </template> </ul> </template> </div> </script>

4. Edit the file adding or replacing the template override for the suggestion item component:

   <script id="vue-hawksearch-suggestion-item" type="x-template"> <li v-on:click="onClick"> <p>{{ getField('title') }}</p> </li> </script>

5. Save, build and reload the site.