...
| Code Block |
|---|
<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.Products.length">
<ul class="hawk-autosuggest-inner-list">
<h3>Results</h3>
<suggestion-item v-for="item in suggestions.Products" :item="item" :key="item.Results.DocId" v-on:itemselected="onItemSeleted"></suggestion-item>
</ul>
<div class="autosuggest-inner-container" v-if="suggestions.Categories.length || suggestions.Popular.length || suggestions.Content.length">
<popular-container :suggestions="suggestions"></popular-container>
</div>
</template>
<template v-else>
<li class="hawk-autosuggest-menu__item">{{ $t('No Results') }}</li>
</template>
</ul>
</template>
</div>
</script> |
After the component is in use we can now override it’s template to display a custom label. Here on line 3 we add the custom label
...