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

Dynamic lookup AEM UI Component

lebohangm922115
Level 2
Level 2

I'm trying to create a search component that retrieves data from mySQL using a web service and an ajax call. I need the search to pull me names for example, When I type 2 or 3 letters it should show me results. How can I accomplish this and are their any tutorials around this?

1 Accepted Solution
kautuk_sahni
Correct answer by
Employee
Employee

Hi 

You question is actually divided into two parts:

1. AEM-RDBMS intigration or getting value from RDBMS into AEM.

2. Autocomplete feature

 

For part 1, please refer to these helx articles 

Link:- https://helpx.adobe.com/experience-manager/using/querying-persisting-cq-data-mysql.html

// here we are Querying and Persisting Adobe AEM data into MySQL and can do Vice-verse

Link:-  https://helpx.adobe.com/experience-manager/using/creating-cq-web-application-uses.html

//Creating an Adobe CQ web application that uses MySQL

 

For Part 2:-

What you can do is, fetch the data from Mysql and save it at JCR level. Now, we can create a Custom Search component (Many Jquery plugins are available for search and Auto complete) which will consult only data from particular Ajex call. This data can be cached in dispatcher so next time when we query the data we can use cached data. Autocomplete thing can be achieved easily by Jquery/

Dispatcher :- https://docs.adobe.com/docs/en/dispatcher.html

Dispatcher :- https://docs.adobe.com/content/docs/en/dispatcher/disp-config.html

AEM Jquery Component:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

Jquery Demo Autocomplete :- https://jqueryui.com/autocomplete/

AutoComplete Jquery Via AJEX:- https://www.sitepoint.com/10-ajaxjquery-autocomplete-tutorial-examples/

HTTP Cache can also be an option for caching :-https://adobe-consulting-services.github.io/acs-aem-commons/features/http-cache.html

I hope this could be of some use to you.

 

Thanks and Regards

Kautuk Sahni

View solution in original post

3 Replies
kautuk_sahni
Correct answer by
Employee
Employee

Hi 

You question is actually divided into two parts:

1. AEM-RDBMS intigration or getting value from RDBMS into AEM.

2. Autocomplete feature

 

For part 1, please refer to these helx articles 

Link:- https://helpx.adobe.com/experience-manager/using/querying-persisting-cq-data-mysql.html

// here we are Querying and Persisting Adobe AEM data into MySQL and can do Vice-verse

Link:-  https://helpx.adobe.com/experience-manager/using/creating-cq-web-application-uses.html

//Creating an Adobe CQ web application that uses MySQL

 

For Part 2:-

What you can do is, fetch the data from Mysql and save it at JCR level. Now, we can create a Custom Search component (Many Jquery plugins are available for search and Auto complete) which will consult only data from particular Ajex call. This data can be cached in dispatcher so next time when we query the data we can use cached data. Autocomplete thing can be achieved easily by Jquery/

Dispatcher :- https://docs.adobe.com/docs/en/dispatcher.html

Dispatcher :- https://docs.adobe.com/content/docs/en/dispatcher/disp-config.html

AEM Jquery Component:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html

Jquery Demo Autocomplete :- https://jqueryui.com/autocomplete/

AutoComplete Jquery Via AJEX:- https://www.sitepoint.com/10-ajaxjquery-autocomplete-tutorial-examples/

HTTP Cache can also be an option for caching :-https://adobe-consulting-services.github.io/acs-aem-commons/features/http-cache.html

I hope this could be of some use to you.

 

Thanks and Regards

Kautuk Sahni

smacdonald2008
Level 10
Level 10

When interacting with MySQL from AEM - consider injecting a DataSourcePool into a bundle -- https://helpx.adobe.com/experience-manager/using/datasourcepool.html

Hope this helps... 

kautuk_sahni
Employee
Employee

Hi 

Adding to my answer and supporting to Scott, 

The DataSourcePool service provides the getDataSource method that returns a DataSource object for a given data source name. As the method argument, use the value of the Datasource Name (or datasource.name) property that you specified for the JDBC Connections Pool configuration.

Documentation :- https://docs.adobe.com/docs/en/aem/6-2/develop/platform/jdbc.html

And again, if primary aim is to autocomplete functionality, then..

Jquery Demo Autocomplete :- https://jqueryui.com/autocomplete/

AutoComplete Jquery Via AJEX:- https://www.sitepoint.com/10-ajaxjquery-autocomplete-tutorial-examples/

Reference article:- https://helpx.adobe.com/experience-manager/using/custom-carousel-components.html (AEM Jquery Component)

 

I hope this will help you.

Thanks and Regards

Kautuk Sahni