PrimeFaces 自动完成:itemSelect 与更改事件 [英] PrimeFaces autocomplete: itemSelect versus change events

问题描述

我需要在更改文本框时触发 ajax 更新，这是一个 组件.我观察到，如果用户选择手动键入文本，则事件是更改，而如果用户单击自动完成建议之一，则事件是 itemSelect.所以我在输入中添加了两个 <p:ajax> 子项，每个子项都调用相同的方法并具有相同的更新列表，但一个具有 event="change" 和另一个 event="itemSelect".

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".

然而，我现在发现了一些奇怪的东西.例如，在正常服务器模式下，我打开页面并输入12".自动完成提供1233"和1234"作为建议.我点击了1233"，似乎什么也没发生.我再次点击并填写了其他所有内容.

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.

在调试器中用事件处理程序的断点重复此操作，我可以看到第一次单击后，值为12"，第二次单击时，它变为1233".

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".

通过切换注释掉两个不同的，我可以看到不同的结果.如果没有更改"选项，则在用户选择自动完成建议时永远不会调用处理程序，如果没有itemSelect"选项，则在用户手动键入时永远不会调用处理程序.但是对于他们两个，有两个调用，我肯定会有关于双击的抱怨.

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.

给喜欢的人一些伪代码，首先是 xhtml:

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>

然后是Java backing bean代码:

Then the Java backing bean code:

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

推荐答案

给父标签一个 widgetVar 属性，然后把这个小属性添加到 <p:ajax event="change" ...> 子标签:

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;" 

写这个问题时，如果我没记错的话，我们使用的是 PrimeFaces 3.5 版.从那时起，我们需要将解决方案更新为:

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;"

感谢 mwalter 指出变化.

with thanks to mwalter for pointing out the change.

这篇关于PrimeFaces 自动完成:itemSelect 与更改事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！