primefaces KeyUp sự kiện trì hoãn

Question

Tôi có một cái gì đó như:

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

Nhưng tôi không muốn làm một yêu cầu Ajax trên mỗi phím nhấn, tôi muốn làm theo yêu cầu một nửa thứ hai sau khi người dùng ngừng viết.

Tôi đã thấy vấn đề này được giải quyết trong jQuery trong một câu hỏi khác: How to delay the .keyup() handler until the user stops typing?

Tôi muốn biết nếu nó có thể làm điều này trên primefaces hoặc làm thế nào thích nghi với giải pháp từ các câu hỏi jQuery.
Tôi đang sử dụng PrimeFaces 3.0.M4.
Cảm ơn bạn trước.

Answer 1

Tại sao bạn không sử dụng thành phần RemoteCommand của PrimeFaces?

Nó cung cấp cho bạn một hàm Javascript toàn cầu, mà bạn có thể gọi từ bất cứ nơi nào bất cứ khi nào bạn muốn. Và nó cho phép bạn gọi phương thức bean được quản lý và nó có thuộc tính update để cập nhật một phần.

<p:inputText id="input" /> 

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

Đăng ký xử lý sự kiện, tôi mượn sau từ 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

Bạn không thể sử dụng thành phần Ajax Primefaces, nếu bạn chọn giải pháp jquery/javascript. Bạn sẽ phải thực hiện chức năng javascript của riêng bạn (với hỗ trợ ajax/xmlHttpRequest) và kích hoạt chức năng đó sau nửa giây.

Nhưng có một giải pháp khác, một cách giải quyết: bạn có thể sử dụng một autocomplete thành phần và sử dụng 3 thuộc tính hữu ích: valueChangeListener (A method expression that refers to a method for handling a valuchangeevent - bạn sử dụng mà thay vì completeMethod bởi vì bạn không cần những gợi ý trở lại), truy vấnDelay (Delay to wait in milliseconds before sending each query to the server) và minQueryLength (Number of characters to be typed before starting to query - nếu bạn không muốn bắt đầu yêu cầu ajax sau chỉ một ký tự được nhập).

Tôi hy vọng bạn sẽ tìm thấy giải pháp này yên tĩnh thú vị ... Vui lòng xem thành phần tự động hoàn tất ở đây (http://www.primefaces.org/showcase-labs/ui/autocompleteHome.jsf) và bạn có thể tìm hiểu thêm bằng cách đọc Hướng dẫn sử dụng Primefaces cho 3.0.M4.

Answer 3

Một nhanh chóng hack sẽ có thêm một sự chậm trễ trong onstart của p:ajax. Xác định các chức năng sau đây đâu đó trong javascript của bạn:

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; 
} 

Về cơ bản chức năng kích hoạt các yêu cầu ajax trong một thời gian chờ nhất định khi trở về sai cho một ngay lập tức, và đổ OnStart vào đó yêu cầu hết thời gian chờ để không bị mắc kẹt trong một vòng lặp khó chịu.

Sau đó trên p:ajax:

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

Việc chậm trễ là tùy chọn ở đây, theo mặc định nó là 2 giây.

Answer 4

Nếu sử dụng Primefaces 5.x, có thuộc tính delay trong thẻ p:ajax cho mục đích này.Vì vậy, nó được thực hiện như thế này:

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

Nếu không, bạn có thể đạt được nó bằng cách sử f:ajax thay vì p:ajax (vâng, nó hoạt động với p:inputText, quá). f:ajax đã thêm hỗ trợ cho queue control bắt đầu từ JSF 2.2. Vì vậy, các mã trông giống như:

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

Xem thêm:

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