Expand my Community achievements bar.

SOLVED

Search Component With JQuery and AJax

Avatar

Former Community Member

I would like to create a search box component, similar to the one that comes out of the box with CQ5. But I'd like it to have the following features:

  • AJAX search (this would mean that the entire page wouldn't need to refresh on submit)
  • Auto-suggest (I'd like the admin to be able to choose an excel spreadsheet with the auto-suggest words)
  • Ability to specify one folder to search (this is already a feature in the existing search)

I was thinking of using a free jquery plugin to provide the ajax and auto-suggest features, but I'm new to CQ5, so still figuring out what's possible.

  • Is it a good idea to use a jQuery plugin as a starting point?
  • Once I've developed the jQuery, what would I need to do to integrate that into a CQ5 component?
  • Before I start, is there some way to download or buy a search component for CQ5 that already has some or all of the above features?
1 Accepted Solution

Avatar

Correct answer by
Level 10

We have many articles on how to integrate JQuery into AEM. A lot of ppl use JQuery with AEM. I would recommend that you start with these articles:

http://helpx.adobe.com/experience-manager/using/integrating-jquery-framework-cq.html

http://helpx.adobe.com/experience-manager/using/custom-sling-servlets.html (this talks about how to create custom sling servlets and post data via AJAX-- good to know as you are new to CQ)

http://helpx.adobe.com/experience-manager/using/custom-carousel-components.html (a more advanced JQuery one that build a custom carousel)

http://helpx.adobe.com/experience-manager/using/integrating-custom-carousel-component-cq.html (how to get this carousel logic into an AEM component that can be dragged from the side kick onto a page)

Look at the AEM community page for a listing of more How TO AEM articles: 

http://helpx.adobe.com/marketing-cloud/experience-manager.html

View solution in original post

4 Replies

Avatar

Correct answer by
Level 10

We have many articles on how to integrate JQuery into AEM. A lot of ppl use JQuery with AEM. I would recommend that you start with these articles:

http://helpx.adobe.com/experience-manager/using/integrating-jquery-framework-cq.html

http://helpx.adobe.com/experience-manager/using/custom-sling-servlets.html (this talks about how to create custom sling servlets and post data via AJAX-- good to know as you are new to CQ)

http://helpx.adobe.com/experience-manager/using/custom-carousel-components.html (a more advanced JQuery one that build a custom carousel)

http://helpx.adobe.com/experience-manager/using/integrating-custom-carousel-component-cq.html (how to get this carousel logic into an AEM component that can be dragged from the side kick onto a page)

Look at the AEM community page for a listing of more How TO AEM articles: 

http://helpx.adobe.com/marketing-cloud/experience-manager.html

Avatar

Level 10

Out of the box comes with jquery & can use the same. No need to develop client library for it.  You might find the article useful [1]  in case you can  import excel into jcr properties. 

[1]   http://aemfaq.blogspot.com/2013/07/predictive-search.html

Avatar

Community Advisor

Hi Sham,

Will it also offer the degree of control on Suggestions? I mean what should get offered and what not.

I went through the article and it seems it will index all the properties mentioned which means all the indexed content would come up as suggestions. Is there a way to limit it?

Thanks

Runal

Avatar

Level 10

Runal.Trivedi wrote...

Hi Sham,

Will it also offer the degree of control on Suggestions? I mean what should get offered and what not.

I went through the article and it seems it will index all the properties mentioned which means all the indexed content would come up as suggestions. Is there a way to limit it?

Thanks

Runal

 


While indexing in the path store only those are required there.  To your original question Path, Stop word & Maximum suggestion will help to control. For additional control need to develop higher ranking servlet for resource type = cq/search/components/suggest and extension = json