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

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

  • September 28, 2021
  • 2 replies
  • 1837 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

Asutosh_Jena_
Community Advisor
Asutosh_Jena_Community AdvisorAccepted solution
Community Advisor
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!

    B
    balajiv3018964
    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
    December 9, 2024

    Why has this NEVER been answered?

     

    Terms & ConditionsAccessibility statement

    Loading footer...