PrimeFaces autocomplete: itemSelect versus change events

Question

I need to trigger an ajax update upon change to a text box, which is a <p:autoComplete> component. I have observed that if the user opts to type the text manually, the event is a change, whereas if the user clicks one of the suggestions for the autocomplete, the event is itemSelect. So I added two <p:ajax> children to the input, each calling the same method and having the same update list, but one having event="change" and the other event="itemSelect".

However, I now discover something odd. For example, while in normal server mode I opened my page and typed "12". The autocomplete offered "1233" and "1234" as suggestions. I clicked "1233" and seemingly nothing happened. I clicked again and everything else filled in.

Repeat this in the debugger with a breakpoint on the event handler, and I can see that after the first click, the value is "12" and on the second click, it becomes "1233".

By switching commenting out the two different <p:ajax> I can see the different consequences. Without the "change" one, the handler is never called if the user selects an autocomplete suggestion, and without the "itemSelect" one, the handler is never called if the user types manually. But with both of them, there are two calls, and I'm sure there will be complaints about the double-click.

Some pseudo-code for those that like, first the xhtml:

<p:autoComplete id="itemId" value="#{myBacker.myBean.itemNumber}"
    required="true" completeMethod="#{myBacker.idAutoComplete}">
    <p:ajax event="itemSelect" update="beanDetails"
        listener="#{myBacker.idChangeEventListener()}" />
    <p:ajax event="change" update="beanDetails"
        listener="#{myBacker.idChangeEventListener()}" />
</p:autoComplete>
<h:panelGroup id="beanDetails">
    <h:panelGroup rendered="#{not empty myBacker.myBean.institutionName}">
        <h:outputText value="#{myBacker.myBean.institutionName}" />
        <!-- Continues with address, phone, etc..  -->
    </h:panelGroup>
</h:panelGroup>

Then the Java backing bean code:

public void idChangeEventListener() {
    myBean = myDAO.getDetails(myBean);
    //  another couple of init-type method calls
}

cobaltduck cobaltduck · Accepted Answer · 2013-10-18T13:02:11

Give the parent tag a widgetVar attribute, then add this little attribute to the <p:ajax event="change" ...> child tag:

onstart="if(widgetVarName.panel.is(':visible')) return false;"

When the question was written, we were on PrimeFaces version 3.5, if I recall correctly. Since then, we need to update the solution to:

onstart="if(PF('widgetVarName').panel.is(':visible')) return false;"

with thanks to mwalter for pointing out the change.

PrimeFaces autocomplete: itemSelect versus change events

1 Answers