Thursday, October 21, 2010

ADF UI: Creating Autosuggest LOV

I was curious to know if ADF supports autosuggest LOVs just like google search.. getting suggestions as you type in. Now, I found ADF has a nice way to achieve auto-suggest LOVs.  Here is the example workspace.

1. Example UseCase: 

Let us take simple example based on scott schema. Lets say we're creating a new employee record and we need to enter departement name while creating the employee record. Let's make DeptName as LOV and implement auto-suggest behavior for the DeptName. i.e., getting the auto-suggested list of values as you type in the department name in the LOV.

2. Implementation Steps:

i. Create two entities on Emp and Dept tables (Lets say they are EmpEO and DeptEO).

ii. Create association between these EmpEO and DeptEO on DeptId.

iii. Create a VO (say EmpDeptVO) joining these two EOs. Make EmpEO as base entity and DeptEO as referenced entity.

iv. Create view accessor in EmpDeptVO on DeptVO and create LOV(Combobox with List of Values) on Dname (which is in referenced entity i.e., DeptEO) attribute in EmpDeptVO.

v. Drop this attribute as an List of Values -> ADF LOV Choice List into the jsf page. And, set autoSubmit="true" for the LOV as we need to fetch results from DB for each key-stroke.

vi. Now, select the LOV, right click -> 'Inser inside' -> select 'Auto Suggest Behavior' and give value for SuggestedItems as "#{bindings.Dname.suggestedItems}".

The LOV code will be as below:
<af:inputComboboxListOfValues id="dnameId" popupTitle="Search and Select: #{bindings.Dname.hints.label}" value="#{bindings.Dname.inputValue}" label="#{bindings.Dname.hints.label}" model="#{bindings.Dname.listOfValuesModel}" required="#{bindings.Dname.hints.mandatory}" columns="#{bindings.Dname.hints.displayWidth}" shortDesc="#{bindings.Dname.hints.tooltip}"> <f:validator binding="#{bindings.Dname.validator}"/> <af:autoSuggestBehavior suggestedItems="#{bindings.Dname.suggestedItems}"/> </af:inputComboboxListOfValues>

vii. Now, run the jsf page and you can find the auto-suggest list as you type in the LOV.

Enjoy :) !


  1. hi
    nice tutorial
    i have once requirement without database table i want to create a LOVs(from search option)... i created lov's for combo box and drop down list please try this approach
    i required this in OIM 11G plz ..


  2. The default behaviour for autosuggest is to provide text based suggestions from a "starts with" condition. What if you need to customize it under a "contains" condition instead?

  3. You can easily do a contains if you implement the list in a backing bean
    public ArrayList getTagList(FacesContext ctx, AutoSuggestUIHints hints) {
    //first time query is against database
    ArrayList filteredSelectList = new ArrayList(25);

    String srchString = hints.getSubmittedValue();
    int maxCount = hints.getMaxSuggestedItems();
    srchString = srchString.toLowerCase();
    this.srchString = srchString;
    tagList = new ArrayList();
    List filteredList = null;
    filteredList =
    getSuggestProvider().filteredValues(srchString.substring(0,1), false);
    tagList = populateList(filteredList);

    for(SelectItem tag :tagList){
    if (tag.getLabel().toLowerCase().startsWith(srchString)) {

    return filteredSelectList;

  4. Hi Murali,

    Thanks for the post, it inspired me to integrate jQuery autocomplete plugin with ADF faces which could be used for more customizable scenarios where the data is loaded upfront.



Related Posts with Thumbnails