AutoComplete feature with multiple element section in ADF

Auto suggest feature in ADF

We use the <af:autoSuggestBehavior/> tag to support the auto complete functionality in ADF - JSF screens.

Limitation with auto complete in ADF

It allows the selection of just one element. If we want multiple elements to be selected as shown below, it is not possible with ADF

Solution

We can use this JQuery add on - The link to download the JQuery is her

How to use that plugin?

JSF Code is as below

<af:inputText id="it1" rows="1" columns="50" label="To" simple="true"
styleClass="user-search-token-input" autoSubmit="true"
value="#{backingBeanScope.TestBean.sampleInput}"
binding="#{backingBeanScope.Test.sampleText}">
</af:inputText>


   <div style="display:none" data-bind="
                            tokenInput: 'REST API to get the code',
                            tokenInputSelector: '.user-search-token-input input',
                            tokenInputOptions: {
                                method: 'POST',
                                queryParam: 'query',
                                jsonContainer: 'users',
                                propertyToSearch: 'uid',
                                tokenValue: 'uid',
                                hintText: 'Please enter name or email address'
                            }"><jsp:text/></div>

Expected input to the Add on

$(document).ready(function() {
$("#user-search-token-input").tokenInput([{
"first_name": "Arthur",
"last_name": "Godfrey",
"email": "arthur_godfrey@nccu.edu",
"url": "https://default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Jolly",
"email": "andre.jolly@uol.com.br",
"url": "https://default_profile_images/default_profile_2_normal.png"
},
{
"first_name": "Andre",
"last_name": "Henderson",
"email": "andre.henderson@globo.com",
"url": "https://default_profile_images/default_profile_2_normal.png"
}
 ]);
});

How to make the customization to the JQuery add on

Customize the required values in the plugin at the place shown in the below diagram.