PrimeFaces自动完成：itemSelect与变化事件 [英] PrimeFaces autocomplete: itemSelect versus change events

问题描述

我需要触发变化时一个ajax更新一个文本框，这是一个＆LT;电话号码：自动完成＆GT; 组件。我观察到，如果用户选择手动键入的文本，该事件是发生了变化，而如果用户点击为自动完成的建议之一，该事件是itemSelect。所以我加了两个＆LT;电话号码：AJAX＆GT; 孩子到输入端，每个调用相同的方法，并具有相同的更新列表，但一有事件=更改和其他事件=itemSelect。

不过，我现在发现一个奇怪的现象。例如，虽然在正常服务器模式，我打开我的网页和类型12。自动完成提供了1233和1234的建议。我点击1233，看似什么都没有发生。我再次点击和一切填写。

对事件处理程序的断点重复这在调试器，我可以看到第一次点击后，该值是12，并在第二次点击，就变成了1233。

通过切换注释掉两个不同的＆LT;电话号码：AJAX＆GT; 我可以看到不同的结果。如果没有变之一，如果用户选择自动完成建议的处理程序不会被调用，并没有itemSelect之一，处理程序从不如果用户键入手动调用。但是他们两个，有两个电话，我敢肯定，将有大约双击的投诉。

一些伪code对于那些喜欢，首先是XHTML：

 ＆LT;电话号码：自动完成ID =的itemIdVALUE =＃{} myBacker.myBean.itemNumber
    所需=真completeMethod =＃{} myBacker.idAutoComplete＆GT;
    ＆LT;电话号码：AJAX事件=itemSelect更新=beanDetails
        听众=＃{myBacker.idChangeEventListener（）}/＆GT;
    ＆LT;电话号码：AJAX事件=变更新=beanDetails
        听众=＃{myBacker.idChangeEventListener（）}/＆GT;
＆LT; / P：自动完成＆GT;
＆所述; H：panelGroup中的id =beanDetails＆GT;
    ＆LT; H：panelGroup中呈现=＃{非空myBacker.myBean.institutionName}＆GT;
        ＆LT; H：的outputText值=＃{} myBacker.myBean.institutionName/＆GT;
        ＆所述;！ - 继续与地址，电话等。 - ＆GT;
    ＆LT; /小时：panelGroup中＆GT;
＆LT; /小时：panelGroup中＆GT;
 

那么Java后台bean code：

 公共无效idChangeEventListener（）{
    myBean = myDAO.getDetails（myBean）;
    //另一对夫妇的init式的方法调用
}
 

解决方案

给父标签的widgetVar属性，那么这个小属性添加到＆LT;电话号码：AJAX事件=变.. ＆GT; 子标签：

 的OnStart =如果（widgetVarName.panel.is（：可见））返回false;
 

这一切都需要。

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
}

解决方案

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

That's all it takes.

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