primefaces keyup事件延遲

Question

我有類似：

<p:inputText...> 
    <p:ajax event="keyup" update="somefield" listener="#{someBean.doSomething}"/> 
</p:inputText> 

但我不想做的每個按鍵一個Ajax請求，我願做請求半秒用戶停止書寫後。

我已經看到了這個問題，另外一個問題jQuery的解決： How to delay the .keyup() handler until the user stops typing?

我想知道是否有可能做到這一點就primefaces或如何適應從jQuery問題解決方案。
我正在使用PrimeFaces 3.0.M4。
預先感謝您。

Answer 1

爲什麼不使用PrimeFaces'RemoteCommand組件？

它給你一個全球性的Javascript功能，你可以隨時隨地撥打電話。它可以讓你調用managed bean方法，它有update屬性來進行部分更新。

<p:inputText id="input" /> 

<h:form> 
    <p:remoteCommand name="sendAjaxical" update="somefield" action="#{someBean.doSomething}"/> 
</h:form> 

註冊事件處理程序，我借用the same answer you posted如下：

var delay = (function() { 
    var timer = 0; 
    return function(callback, ms) { 
     clearTimeout (timer); 
     timer = setTimeout(callback, ms); 
    }; 
})(); 


jQuery("#input").keyup(function() { 
    delay(function() { sendAjaxical(); }, 2000); //sendAjaxical is the name of remote-command 
}); 

Answer 2

如果您選擇jQuery/javascript解決方案，則無法使用Primefaces Ajax組件。您必須實現您自己的javascript功能（支持ajax/xmlHttpRequest），並在半秒後觸發該功能。

但還有另一種解決方案，一個解決方法：你可以使用一個自動完成組件，並使用3個有用的屬性：valueChangeListener（A method expression that refers to a method for handling a valuchangeevent - 你用這個來代替completeMethod因爲你並不需要返回的建議）， queryDelay（Delay to wait in milliseconds before sending each query to the server）和minQueryLength（Number of characters to be typed before starting to query - 如果您不想在輸入一個字符後啓動ajax請求）。

我希望您會發現這個解決方案安靜有趣......請參閱此處的自動完成組件（http://www.primefaces.org/showcase-labs/ui/autocompleteHome.jsf），您可以通過閱讀3.0.M4的Primefaces用戶指南瞭解更多信息。

Answer 3

快速黑客將在p:ajax的onstart增加一個延遲。某處定義下列函數在JavaScript：

function keyupDelay(request, cfg, delay) { 
    delay = delay || 2000;// if no delay supplied, two seconds are the default seconds between ajax requests 
    setTimeout(function() { 
     cfg.onstart = null; 
     request.send(cfg) 
    }, delay); 
    return false; 
} 

基本上是函數會觸發一定的超時Ajax請求而對眼前的一個返回false，並清空上已逾時要求的OnStart爲了不停留在令人討厭的循環。

然後在p:ajax：

<p:ajax event="keyup" onstart="return keyupDelay(this, cfg)" /> 

延遲參數是可選的位置，默認情況下它是2秒。

Answer 4

如果使用Primefaces 5.x，則p:ajax標記中有delay屬性用於此目的。所以，它的完成這樣的：

<p:inputText...> 
    <p:ajax event="keyup" delay="1000" listener="#{someBean.doSomething}" 
     update="somefield" process="@this" /> 
</p:inputText> 

如果不是，您使用的f:ajax代替p:ajax可以實現它（是的，它的工作原理與p:inputText，太）。 f:ajax已從JSF 2.2開始增加對queue control的支持。所以，代碼如下：

<p:inputText...> 
    <f:ajax event="keyup" delay="1000" listener="#{someBean.doSomething}" 
     render="somefield" execute="@this" /> 
</p:inputText> 

參見：

• Primefaces 5.0 p:ajax javadoc
• JSF 2.2 docs for f:ajax