How can I display the search result in a page using OOTB Quick Search Component?

[jezwn]

Hi,

I was trying to use the OOTB Quick Search Component. I can set up the search root from cq:dialog and the results count from design dialog. The search is working fine it appears to be as I see the related pages as dropdown when I initiate the search by typing in. How can I have this results displayed in a page?

Component References: 
1. https://experienceleague.adobe.com/docs/experience-manager-core-components/using/components/quick-se...

2. https://github.com/adobe/aem-core-wcm-components/tree/master/content/src/content/jcr_root/apps/core/...

Any insights on this would be helpful. Thank you!

[Asutosh_Jena_ · Accepted solution]

Hi @jezwn 

Below line of code is responsible for displaying the search result on page as a overlay which is available in search.html file.

<div class="cmp-search__results" aria-label="${'Search results' @ i18n}" data-cmp-hook-search="results" role="listbox" aria-multiselectable="false"></div>
<sly data-sly-include="itemTemplate.html"/>

You can overlay these files and your custom implementation which will display the result in the page and the component can be authored on the page.

https://github.com/adobe/aem-core-wcm-components/blob/master/content/src/content/jcr_root/apps/core/...

Thanks!

[balajiv3018964]

Hi, need to render thumbnail Image in the search result. any help how to render or add image to itemTemplate.html and search.js file.

Search Results: need to display Title, Description and Thumbnail Image. Please help anyone on this.

Thanks in advance