Sun. Oct 24th, 2021

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

By Susanto Paul

Susanto is an Oracle ACE, a qualified MCA, MBA, and a highly-skilled Senior Oracle Specialist. He is an enthusiastic Blogger and YouTuber who helps learners to solve their complex problems more efficiently. He has 9+ years of experience in multiple technologies like AWS, Oracle ADF, Oracle APEX, Oracle JET, Oracle VBCS, Oracle IDCS, Oracle PL/SQL, Oracle Integration Cloud, Java, JDBC, Servlets, JSP, Spring, Hibernate, HTML5, CSS3, JavaScript, TypeScript, NodesJS, Angular, MySQL, Oracle WebLogic Server, JUnit, JMeter, Selenium Web Driver, etc. He is a certified: Oracle Certified Professional Java SE 6 Programmer, Oracle ADF 11g Certified Implementation Specialist, Oracle Cloud Platform Application Integration 2020 Certified Specialist, Oracle Cloud Infrastructure Foundations 2020 Certified Associate, and Oracle Cloud Infrastructure Developer 2020 Certified Associate

Leave a Reply

Your email address will not be published. Required fields are marked *

satta king chart