ADF Faces RC: Working with the AutoSuggest Behavior

An Oracle JDeveloper How To Document
Written by Juan Camilo Ruiz, Oracle Corporation
November, 2009

The AutoSuggest Behavior in ADF 11g

The af:autoSuggestBehavior is a new tag from the ADF Faces RC part of the ADF 11g PS1 release. This article explains how input components and list of values can adapt auto-suggest style functionality.

Introduction

The af:autoSuggestBehavior produces a dropdown list of suggested items as the user types into the input component. This functionality is implemented as a behavior which means it is a sub-element that needs to be inserted into a top-level component tag.

Let’s use our Employees table on the HR schema to create an employee entry form. To use the auto-suggest functionality in a declarative way you need to define a model-driven list of values on your model project, which will be the base for the suggestedItems list. Select the FirstName attribute from the Employees VO and create a List of Values.

Create List of Values

Create List of Values

On the UI Hints Tab,select the Default Display to be Input Text with List of Values.

Create List of Values

Now we can work on the UI.

Implementing the UI

Drag and drop the Employee collection to an empty page to create an input form

Create an Input Form

The FirstName attribute is displayed as an inputListOfValues, although all we need is to have any kind of input text. Now drag and drop the autoSuggestBehavior from your component palette inside of List.

Drag and Drop Auto Suggest Behavior

Then you are prompted to enter the suggestedItems list. The suggestedItems attribute needs to be bounded to a method with signature List<javax.faces.model.SelectItem>, although for model-driven list we have added the suggestItems property to the list bindings on the ADFm -you can then access the suggest list of items via EL.

Suggested Items List

The source code of your page then is

                                                 
<af:inputListOfValues id="firstNameId"
                                              

                                                 
popupTitle="Search and Select: #{bindings.FirstName.hints.label}"
                                              

                                                 
value="#{bindings.FirstName.inputValue}"
                                              

                                                 
label="#{bindings.FirstName.hints.label}"
                                              

                                                 
model="#{bindings.FirstName.listOfValuesModel}"
                                              

                                                 
required="#{bindings.FirstName.hints.mandatory}"
                                              

                                                 
columns="#{bindings.FirstName.hints.displayWidth}"
                                              

                                                 
shortDesc="#{bindings.FirstName.hints.tooltip}">
                                              

                                                 
<f:validator binding="#{bindings.FirstName.validator}"/>
                                              

                                                 
<af:autoSuggestBehavior suggestedItems="#{bindings.FirstName.suggestedItems}"/>
                                              

                                                 
</af:inputListOfValues>
                                              

Source Code

                                       


Now run your page and now you will get auto suggest items as you type. Here are two different types of lists:
                                      


<table>
<tbody><tr>
<td><div>
                                      
</div></td>
<td>
                                      
</td>
</tr>
</tbody></table>
                                    

<h3>Where to get more information</h3>
                                      


<ul><li>
                                      
JDeveloper Home on OTN.
                                      


</li><li>
                                      
ADF Faces Rich Client Components Home.
                                      


</li><li>
                                      
ADF Faces Rich Client Hosted Demo.</li></ul>