Dynamic lookup AEM UI Component

[lebohangm922115]

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?

[kautuk_sahni · Accepted solution]

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]

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]

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