How can I display the search result in a page using OOTB Quick Search Component? | Community
Skip to main content
jezwn
jezwn
New Participant
September 28, 2021
Solved

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

  • September 28, 2021
  • 2 replies
  • 1834 views

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-search.html?lang=en#properties-tab

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

 

Any insights on this would be helpful. Thank you!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Asutosh_Jena_

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/wcm/components/search/v1/search/itemTemplate.html

 

Thanks!

2 replies

B
balajiv3018964
New Participant
July 15, 2022

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

S
SeanGa1
New Participant
December 9, 2024

Why has this NEVER been answered?

 

Asutosh_Jena_
Asutosh_Jena_Accepted solution
New Participant
September 28, 2021

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/wcm/components/search/v1/search/itemTemplate.html

 

Thanks!

    Terms & ConditionsAccessibility statement

    Loading footer...