Highlighted

Implement Autocomplete in an Adaptive form[Sample]

Avatar

Avatar

Mayank_Gandhi

Employee

Avatar

Mayank_Gandhi

Employee

Mayank_Gandhi
Employee

19-07-2018

I have created two sample in case you want to implement Autocomplete in your Adaptive form. The sample uses the jQuery UI Autocomplete. You may refer to the API doc for more details.

1531638_pastedImage_26.png

The below sample assumes that you have a text field with Element Name as texbox1, the script needs to placed on field initialize.

Example 1:

You have a small List of elements and the elements are not meant to be updated frequently. Let's take an example of a few countries in an array. This Array of strings would be used as a source to the Jquery autocomplete. Here is a simple script for the hard-coded list.

var values = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan"];

$(".textbox1 input").autocomplete({

    minLength: 1,

    source: values,

    delay: 0

});

Example 2:  You want to call a service which would return the elements to be displayed in JSON data. Here we are making an AJAX call and firing the Jquery Autocomplete on success event.

$.ajax({

     url: "https://restcountries.eu/rest/v2/all",

     dataType: "json",

     success: function (data) {

           var vals = data.map(function(item){

                   return {

                      label: item.name +'(calling code-' + '+' + item.callingCodes +')',

                      value: item.name

                             };

                    });

           $(".textbox1 input").autocomplete({

                   minLength: 1,

                   source : vals,

                   classes: {

                   "ui-autocomplete": "highlight"

                                }

                     });

              }

  });

Note: minLength states the minimum number of characters a user must type before a search is performed. Zero is useful for local data with just a few items, but a higher value should be used when a single character search could match a few thousand items.

Additional use case:

You may also have a requirement to allow the user to search for currency or even the country code but want to populate the country name only as a Label. For example, user search for Ottawa and the suggestion for Canada is shown. In such a case, you can create your own custom filter for pattern matching. Here is a sample script for the above use case. 

$(".textbox1 input").autocomplete({

  source: function(request, response) {

    $.ajax({

    url: "https://restcountries.eu/rest/v2/all",

    dataType: "json",

    success: function (availableTags) {

            var list = availableTags.filter(function(tag) {

                if (JSON.stringify(tag).indexOf(request.term) !== -1)

                    return tag;

                });

                response(list.map(function(listItem) {

                return {

                    label: listItem.name,

                        value: listItem.timezones

                    };

                }));

            }

        });

    }

});

1531633_pastedImage_17.png

Replies

Highlighted

Avatar

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Answer

2.3K
smacdonald2008

19-07-2018

Nice Post!

Highlighted

Avatar

Avatar

fabioper85

Avatar

fabioper85

fabioper85

03-09-2018

Really nice post!!!!

And if I'd need to fetch the data from a database? Can you help me?

Thank you so much!

Fabio

Highlighted

Avatar

Avatar

kk75533990

Avatar

kk75533990

kk75533990

15-04-2019

Good Evening Mayank,

The following steps I took to achieve but failing. So thought if checking with you.

I have created a text box - textbox1.

WIth Rule Editor and code editor, I have placed the code in the initialize.

When I previewed I did not get the auto populated values.

Do you happen to have the package for this example? Any help is greatly appreciated.

Thanks

Highlighted

Avatar

Avatar

Mayank_Gandhi

Employee

Avatar

Mayank_Gandhi

Employee

Mayank_Gandhi
Employee

24-04-2019

Can you please confirm the version of AEM that you are using? the code uses JQuery UI, It might be possible that form is unable to load the same in your case.

Highlighted

Avatar

Avatar

krishnan9765231

Avatar

krishnan9765231

krishnan9765231

24-04-2019

Thank you Mayank for the reply.

Currently we are using AEM 6.2 and CFP19.

I tried in all other versions are too. 6.3 and 6.4. Never worked. May be I am missing something which I am not aware of it. If you can  add your package here that would be greatly appreciated. Thanks a bunch again.

Highlighted

Avatar

Avatar

Mayank_Gandhi

Employee

Avatar

Mayank_Gandhi

Employee

Mayank_Gandhi
Employee

24-04-2019

add jquery UI to the client libs. This is from 6.3, you can check the same at crx/de/index.jsp#/etc/clientlibs/foundation/ at your end to make sure it exists in your server.

1739367_pastedImage_0.png

Highlighted

Avatar

Avatar

kk75533990

Avatar

kk75533990

kk75533990

24-04-2019

Thank you very much Mayank. This works great. You are awesome. Thank you again.

Highlighted

Avatar

Avatar

Mayank_Gandhi

Employee

Avatar

Mayank_Gandhi

Employee

Mayank_Gandhi
Employee

30-04-2019

NP, happy to help!