使用PrimeFaces <p:ajax>,仅在更改字段的击键时触发inputText中的Ajax

Question

我正在使用PrimeFaces并且有一个p:inputText字段,我需要根据p:inputText中的最新按键更新视图上的一些组件.这是代码:

<p:inputText value="#{customerLController.surnameFilterConstraint}"
             id="surnamefilterfield">
    <p:ajax event="keyup" 
            update=":custForm:custDataTable"
            listener="#{customerLController.focusSurname}"
            oncomplete="primeFacesId('surnamefilterfield')"/>
</p:inputText>

问题是,即使在箭头键击的情况下,上面的代码也会激活Ajax(考虑到代价高昂的更新,我宁愿避免使用).理想情况下,我想要一个不同版本的p:ajax event ="change",其条件是更改在击键时发音,而不是在用户点击Enter时(现在发生的事情).

如果p:ajax组件不允许某种方法过滤掉某些keyup事件,那么我认为唯一的(？)替代方法是在客户端调用JavaScript然后在Javascript中实现Ajax调用但是我会放弃使用PrimeFaces p:ajax组件的便利性,不是吗？

Answer 1

从 JSF 2.2 开始，我使用优雅的方式来解决这个问题。

解决方案基于p:remoteCommand（如评论之一中指出的）和命名空间的组合http://xmlns.jcp.org/jsf/passthrough，它允许您在 JSF 组件中定义本机 HTML事件属性。

在这种情况下，它将是：

1. 首先将新的命名空间添加到您的页面

   xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
   

2. 修改p:inputText并添加p:remoteCommand

   <p:inputText id="surnamefilterfield" 
             value="#{customerLController.surnameFilterConstraint}" 
             pt:onkeyup="onKeyUpFilterKeyCode(event)"/>
   <p:remoteCommand delay="300" name="onFilteredKeyUp" 
                 actionListener="#{customerLController.focusSurname}" /> 
   

3. 添加 JavaScript 函数

      function onKeyUpFilterKeyCode(event){
           var keyCode=event.keyCode;
           console.log("Key code = " + keyCode);
           //if key is not ENTER and not cursor/arrow keys
           if ((keyCode != 13) && !((keyCode >= 37) && keyCode <= 40)){
               //call remoteCommand
               onFilteredKeyUp();
           }
       }
   

（由于此 JS 函数包含“特殊”XML 字符，请遵循BalusC关于如何将其添加到 JSF/XML 网页的建议）

这种方法的优点是，您可以 ajaxify 组件（和 WEB 浏览器）支持的任何本机 HTML 事件，同时仍然使用 JSF/Primefaces 组件和创建 WEB 页面的“JSF 方式”。