Requirement: I have a List of Value field displaying the Department Name. I want to implement auto suggest behavior for the Department Name field so that as soon as the user enters some character in the Department Name field it should immediately suggest some value starting with that character(s).
Sample screen shot is shown below:
Solution: For solution of the above requirement follow the steps as shown below:
Step 1: Create an Oracle ADF Fusion Web Application.
Create a Business Components from Tables for the Employees table of the HR schema of the Oracle Database 11g XE Edition.
Step 2: Create a List of values on the DepartmentName.
Step 2: Create a demo.jspx page inside the ViewController project.
Drag and drop af:panelFormLayout inside the af:form
Drag and drop DepartmentId from the Data Controls palette as an ADF Input Text w/ Label
Drag and drop DepartmentName from the Data Controls palette as an ADF LOV Choice List
Step 3: Drag and drop af:autoSuggestBehavior component from the Component palette. Set suggestedItems=”#{bindings.DepartmentName.suggestedItems}”
Thus, the complete code for the demo.jspx page is shown below:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
xmlns:af="">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document title="demo" id="d1">
<af:messages id="m1"/>
<af:form id="f1">
<af:panelFormLayout id="pfl1">
<af:inputText value="#{bindings.DepartmentId.inputValue}"
label="#{bindings.DepartmentId.hints.label}"
required="#{bindings.DepartmentId.hints.mandatory}"
columns="#{bindings.DepartmentId.hints.displayWidth}"
maximumLength="#{bindings.DepartmentId.hints.precision}"
shortDesc="#{bindings.DepartmentId.hints.tooltip}" id="it1">
<f:validator binding="#{bindings.DepartmentId.validator}"/>
<af:convertNumber groupingUsed="false" pattern="#{bindings.DepartmentId.format}"/>
</af:inputText>
<af:inputComboboxListOfValues id="departmentNameId"
popupTitle="Search and Select: #{bindings.DepartmentName.hints.label}"
value="#{bindings.DepartmentName.inputValue}"
label="#{bindings.DepartmentName.hints.label}"
model="#{bindings.DepartmentName.listOfValuesModel}"
required="#{bindings.DepartmentName.hints.mandatory}"
columns="#{bindings.DepartmentName.hints.displayWidth}"
shortDesc="#{bindings.DepartmentName.hints.tooltip}">
<f:validator binding="#{bindings.DepartmentName.validator}"/>
<af:autoSuggestBehavior suggestedItems="#{bindings.DepartmentName.suggestedItems}"/>
</af:inputComboboxListOfValues>
<f:facet name="footer"/>
</af:panelFormLayout>
</af:form>
</af:document>
</f:view>
</jsp:root>Save all and run the application. Thus, the ran application is shown below:
Now, let me type A and we can see all the DepartmentName that starts with A. Here, it is automatically suggesting the DepartmentName based on the letter we type in.
Hence, the solution to our requirement.
If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.
Thanks & Regards,
Susanto Paul
337 total views, 1 views today