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 event attributes。

在这种情况下，它将是：

首先在页面中添加新的命名空间

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

修改p:inputText并添加p:remoteCommand

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

添加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函数包含关于如何将它添加到JSF / XML网页的BalusC recommendations的“特殊”XML字符）

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

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

1 个答案: