Example: How to resolve search term

1 Goal
2 Steps to place the search term

Goal

The keyword that users search for is displayed above the search results. But this information can be visualized in different places on the page. This article aims to explain how the search term/result can be placed in a different position within the page.

Steps to place the search term

For visualizing the search term the CustomResultsLabel component could be used. This component can show the search term like it is shown below.
Adding this label can be made easy by overriding the component where the search label should be visualized. Here is an example of how to override the suggestion component and adding the CustomResultsLabel.

Navigate to the directory of the currently active widget template (e.g. Mvc\Views\Hawksearch\Hawksearch.Default.cshtml or the relevant resource package).
Copy the file of the base template and name it accordingly (Hawksearch.ComponentName.cshtml).
Edit the file adding or replacing the template override for the suggestion list component:

Add the <custom-results-label /> where the search term should be visualized.

    <script id="vue-hawksearch-suggestion-item" type="x-template">
        <custom-results-label results-field="Keyword" />       
        <li v-on:click="onClick">
            <template v-if="getField('contenttype') == 'Telerik.Sitefinity.Pages.Model.PageNode'">
                <h3>{{getField('title')}}</h3>
            </template>
            <template v-else-if="getField('contenttype') == 'Telerik.Sitefinity.News.Model.NewsItem'">
                <p>{{ getField('title') }}</p>
                <small>{{ getField('lastmodified') }}</small>
            </template>
            <div v-html="item.Thumb"></div>
            <p class="p-name">{{ item.ProductName }}</p>
        </li>
     </script>

Include the file in the project.
Save, build and reload the site.

For changing the template of the CustomResultsLabel, the component should be overridden.

This is a specific case of the CustomResultsLabel component usage. For more usage cases visit Example: Place a custom label with search response data