使用 PrimeFaces <p:ajax>，仅在更改字段的击键时在 inputText 中启动 Ajax答案

【问题标题】：Using PrimeFaces <p:ajax>, fire up Ajax in inputText only on keystrokes that change the field使用 PrimeFaces <p:ajax>，仅在更改字段的击键时在 inputText 中启动 Ajax
【发布时间】：2012-07-26 03:34:06
【问题描述】：

我正在使用 PrimeFaces 并且有一个 p:inputText 字段，我需要根据该 p 中的最新击键来更新视图上的一些组件：输入文本。代码如下：

<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 组件的便利，不是吗？

【问题讨论】：

我不熟悉 PrimeFaces，但如果你可以订阅 keypress 而不是 keyup 事件，它应该可以解决这个问题。按键只会触发直接映射到可打印字符的键。
不，这不起作用，至少在我尝试过的 Firefox 和 Konkeror 中没有。
这里有一个答案：stackoverflow.com/questions/8401218/…

标签： javascript ajax primefaces

【解决方案1】：

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

解决方案基于 p:remoteCommand（如 cmets 之一中所指出的）和命名空间 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 函数包含“特殊”XML 字符，请关注BalusC recommendations 关于如何将其添加到 JSF/XML 网页）

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

【讨论】：