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

Using PrimeFaces <p:ajax>, fire up Ajax in inputText only on keystrokes that change the field

本文关键字：字段 inputText Ajax 启动 PrimeFaces ajax gt 使用 lt      更新时间：2024-03-11

我正在使用PrimeFaces，并且有一个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调用，但我会放弃使用PrimeFacesp:ajax组件的便利性，不是吗？

自从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网页的建议）

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

相关文章：