Auto Suggest Items using AutoSuggest Behavior

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: