Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

Avatar

Level 5

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