Expand my Community achievements bar.

SOLVED

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

Avatar

Level 6

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!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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!

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

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!

Avatar

Level 1

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