задержка события keyface Primefaces

Question

У меня есть что-то вроде:

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

Но я не хочу делать Ajax-запрос при каждом нажатии клавиши, я бы хотел сделать запрос через полсекунды после того, как пользователь перестал писать.*

Я видел, как эта проблема решена в jQuery в другом вопросе: Как отложить обработчик .keyup () до тех пор, пока пользователь не прекратит печатать?можно сделать это на простых лицах или как адаптировать решение из вопроса jQuery.
Я использую PrimeFaces 3.0.M4.
Заранее спасибо.

Answer 1

Если вы используете 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. Итак, код выглядит так:

<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 документа для f:ajax

Answer 2

Почему бы вам не использовать компонент RemoteCommand PrimeFaces?

Он предоставляет вам глобальную функцию Javascript, которую вы можете вызывать из любого места в любое время.И он позволяет вам вызывать метод управляемого компонента и имеет атрибут update для частичного обновления.

<p:inputText id="input" />

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

Зарегистрируйте обработчик событий, я заимствовал следующее у того же ответа, который вы отправили :

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 3

Нельзя использовать Ajax-компонент Primefaces, если вы выбрали решение jquery / javascript. Вам нужно будет реализовать свою собственную функцию 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), и вы можете узнать больше, прочитав Руководство пользователя Primefaces для 3.0.M4.

Answer 4

Быстрый взлом будет добавить задержку в onstart из p:ajax. Определите следующую функцию где-нибудь в вашем 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 для немедленного, и освобождая стартовый запрос для этого тайм-аута, чтобы не застрять в неприятном цикле.

Затем на p:ajax:

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

Параметр задержки здесь необязательный, по умолчанию он равен 2 секундам.