PrimeFaces Autocomplete: itemSelect im Vergleich zu Änderungsereignissen

Question

Ich muss ein Ajax-Update auslösen, wenn ich in ein Textfeld ändere, das eine <p:autoComplete> Komponente ist. Ich habe festgestellt, dass das Ereignis eine Änderung ist, wenn der Benutzer den Text manuell eingeben möchte. Wenn der Benutzer auf einen der Vorschläge für die automatische Vervollständigung klickt, lautet das Ereignis itemSelect. Also fügte ich zwei <p:ajax> Kinder an die Eingabe, die jeweils die gleiche Methode aufrufen und die gleiche Update-Liste, aber eine mit event="change" und die andere event="itemSelect".

Allerdings entdecke ich jetzt etwas Merkwürdiges. Im normalen Server-Modus habe ich beispielsweise meine Seite geöffnet und "12" eingegeben. Die Autocomplete bietet "1233" und "1234" als Vorschläge an. Ich habe "1233" angeklickt und scheinbar ist nichts passiert. Ich klickte wieder und alles andere ausgefüllt.

Wiederholen Sie dies im Debugger mit einem Haltepunkt auf den Event-Handler, und ich kann sehen, dass nach dem ersten Klick ist der Wert "12" und auf den zweiten Klick wird es "1233".

Durch das Auskommentieren der beiden verschiedenen <p:ajax> kann ich die verschiedenen Folgen sehen. Ohne "change" wird der Handler nie aufgerufen, wenn der Benutzer einen automatischen Vervollständigungsvorschlag auswählt, und ohne den "itemSelect" wird der Handler nie aufgerufen, wenn der Benutzer manuell tippt. Aber bei beiden gibt es zwei Anrufe, und ich bin mir sicher, dass es Beschwerden über den Doppelklick geben wird.

Einige Pseudo-Code für diejenigen, die wollen, zuerst die 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> 

Dann Code der Java Backing Bean:

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

Answer 1

Geben Sie dem Tag Elternteil ein widgetVar Attribut, fügen Sie dann dieses kleine Attribut auf den <p:ajax event="change" ...> Kind tag:

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

Als die Frage geschrieben wurde, waren wir auf PrimeFaces Version 3.5, wenn ich mich richtig erinnere. Seitdem müssen wir die Lösung zu aktualisieren:

mit Dank an Mwalter für das Hinweis auf die Änderung.