我正在使用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事件属性。
在这种情况下,它将是:
-
首先将新名称空间添加到页面
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关于如何将其添加到JSF/XML网页的建议)
这种方法的优点是,您可以最大化组件(和WEB浏览器)支持的任何本地HTML事件,同时仍然使用JSF/Primefaces组件和创建WEB页面的"JSF方式"。