Primefaces populate other columns values based on selection of autocomplete

Question

I am using Primefaces AutoComplete and I am getting records from database using Hibernate.

I am able to select values from database when I type in text. What I would like to achieve is when I select a name when I type characters, I would want my other columns in jsf page to get populated. E.g When I select employee name "SMITH" I want employee number, department to get filled with SMITH's employee number and department.

I have the following in jsf page.

<p:autoComplete value="#{myMB.selectedEmployee}"
                            id="basicPojo" minQueryLength="3" 
                            completeMethod="#{myMB.complete}" var="p"
                            itemLabel="#{p.empName}" 
                             converter="#{myconverter}"
                            forceSelection="true"  > 

<h:outputLabel value="Emp Number" />
                        <h:outputText value="#{p.employeeNumber}" />

<h:outputLabel value="Department" />
                        <h:outputText value="#{p.employeeDepartment}" />
                    </p:autoComplete>

When I select a name, other fields are not getting displayed.

What could be the reason for this? How can I achieve the desired result?

Any help is highly appreciated.

Edit 1

<p:dialog header="Create New Request" style="font-weight:bold"
                    widgetVar="requestNewDialog" resizable="false" 
        id="newDlg"             
    showEffect="fade" hideEffect="fade" appendToBody="true"
        modal="true" position="center top" width="850" height="450">
                    <h:panelGrid columns="2" cellspacing="2">
                        <h:outputText value="New Employee No:" />
                        <h:outputText value="" />
                    </h:panelGrid>
                    <p:separator />
                    <p:panelGrid columns="6">    
                        <h:outputLabel value="Employee # " for="emp" />
                        <p:autoComplete value="#
                       {myMB.selectedEmployee}"
               id="basicPojo" minQueryLength="3" 
               completeMethod="#{myMB.complete}" var="p"
               itemLabel="#{p.longName}" 
                       converter="#{employeeNameConverter}"
               forceSelection="true"  >
               <p:ajax event="itemSelect" update="num" 
                       listener="#{myMB.handleSelect}"  />      
            <h:outputLabel value="Name" for="name" />
            <h:outputText value="#{p.employeeNumber}" />
            </p:autoComplete>                       

        <h:outputLabel id="num" value="Department" for="dept" />
        <p:inputText id="dept" value="#{p.employeeNumber}" >
                        </p:inputText>
          </p:panelGrid>
     <p:separator />
         </p:dialog>

ManagedBean complete Method

public List<Employee> complete(String query) {
        List<Employee> suggestions;
        suggestions = new ArrayList<Employee>();
        try {

            EmployeeQueryData q = new EmployeeQueryData ();             
            getService().getEmployee(q,query);              
            employee = q.getResult();    
            for (Employee p : employee) {
                if (p.getEmpName().toLowerCase().contains(query)); 
                    suggestions.add(p);    //               
            }
        } catch (Exception e) {             
        }    
        return suggestions;
    }

Daniel Daniel · Accepted Answer · 2013-01-17T08:00:37

Use <p:ajax event="itemSelect"...

<p:autoComplete>...
    <p:ajax event="itemSelect" update="someOtherFieldId someOtherFieldId2" />
</p:autoComplete>

Primefaces populate other columns values based on selection of autocomplete

1 Answers