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"
}
]);
});
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.