6

我正在使用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组件的便利，不是吗？

4

1 回答 1

2

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

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

于 2017-11-15T13:11:48.900 回答