Определите, когда пользователь печатает

Я создаю окно поиска (поле ввода), которое должно выполнить серверный вызов, чтобы отфильтровать сетку с вставленным в нее текстом, но мне нужно сделать это умным способом, мне нужно запустить серверный вызов, только если пользователь имеет остановился. Сейчас я пытаюсь это реализовать, но если кто-то знает, как это сделать, я буду очень рад. В любом случае, если я сделаю это первым, я опубликую ответ здесь ... С наилучшими пожеланиями, Хайме.

11.12.2008 16:11:10
6 ОТВЕТОВ
РЕШЕНИЕ
  1. Когда клавиша нажата:
    1. Проверьте, существует ли таймер - остановите его, если он есть
    2. запустить таймер
  2. Когда таймер истекает, вызовите метод сервера.
var searchTimeout;
document.getElementById('searchBox').onkeypress = function () {
    if (searchTimeout != undefined) clearTimeout(searchTimeout);
    searchTimeout = setTimeout(callServerScript, 250);
};
function callServerScript() {
    // your code here
}
26
6.08.2017 14:03:41
Убедитесь, что таймер имеет задержку, которую вы считаете «законченной печатью», чтобы не прерывать небольшие паузы. Или используйте событие onblur, чтобы увидеть, когда пользователь щелкает текстовое поле.
Karl 11.12.2008 16:17:37
да, задержка должна зависеть от того, насколько интенсивен поиск, насколько быстро вы хотите реагировать, а также от того, насколько быстро ваши пользователи обычно печатают. Я использовал 250 мс для поиска, и это было хорошо IMO.
nickf 11.12.2008 16:20:30
событие не должно быть onkeypress, или что-то в этом роде?
ng.mangine 11.12.2008 18:12:59

Я не очень разбираюсь в JavaScript, но вы могли бы использовать таймер (допустим, установленный на 5 секунд), который сбрасывается при каждом событии изменения из вашего поля ввода. Если пользователь перестает печатать более 5 секунд, таймер истекает и запускает отправку.

Проблема этого подхода заключается в том, что отправка запускается при каждой паузе, например, если пользователь перестает печатать, чтобы рассказать кофе-брейк. Вы должны будете увидеть, приемлемо ли это для пользователей.

0
11.12.2008 16:16:28

Вы можете использовать вызовы, setTimeoutкоторые вызывают функцию вашего сервера (с задержкой 2-3 секунды) на событие нажатия клавиши. Как только нажата клавиша, отмените предыдущий setTimeoutвызов и создайте новый.

Затем, через 2-3 секунды без нажатия клавиш, событие сервера будет запущено.

6
11.12.2008 16:16:56
хе-хе ... ты умный дьявол Никф! Вы печатаете быстрее, чем я тоже.
Andrew Rollings 11.12.2008 16:17:23
muahahah :) Вы думаете, что я получил этот уровень репутации, зная вещи? ха!
nickf 11.12.2008 16:21:19
Хехе ... Вы могли бы по крайней мере upvote меня в утешении: D В конце концов, я же знаю, и мой ответ является полезным.
Andrew Rollings 11.12.2008 16:45:24

Спасибо за ваш отзыв. Я реализовал этот кусок кода, и кажется, что он выполняет свою работу (используя jquery):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
    var interval = 500;
    var filterValue = "";
    $(document).ready(function() {
        $(".txtSearch").bind("keypress", logKeyPress);
    });
    function logKeyPress() {
        var now = new Date().getTime();
        var lastTime = this._keyPressedAt || now;
        this._keyPressedAt = now;
        if (!this._monitoringSearch) {
            this._monitoringSearch = true;
            var input = this;
            window.setTimeout(
                function() {
                    search(input);
                }, 0);
        }
    }
    function search(input) {
        var now = new Date().getTime();
        var lastTime = input._keyPressedAt;
        if ((now - lastTime) > interval) {
            /*console.log(now);
            console.log(lastTime);
            console.log(now - lastTime);*/
            if (input.value != filterValue) {
                filterValue = input.value;
                //console.log("search!");
                alert("search!");
            }
            input._monitoringSearch = false;
        }
        else {
            window.setTimeout(
                function() {
                    search(input);
                }, 0);
        }
    }
</script>

0
11.12.2008 17:55:36
Извините, но я не думаю, что это очень хороший способ сделать это ... не будет ли он постоянно вызывать search () снова и снова, пока не истечет интервал?
nickf 12.12.2008 00:30:21
Нет, он остановится , когда разница между последний раз , что клавиша была нажата и текущее время> на интервал переменной (плохое имя , которое я знаю). Попробуйте сами.
Jaime Febres 12.12.2008 19:32:34

Вот простой способ, который будет работать без jQuery:

<input type="text" id="TxtSearch" onchange="countDown=10;" />

<script type="text/javascript">

var countDown = 0;
function SearchTimerTick()
{
   if(countDown == 1)
   {
      StopTypingCommand();
      countDown = 0;
   }

   if(countDown > 0)
      countDown--;
}

window.setInterval(SearchTimerTick,1000);

</script>
2
1.09.2010 20:38:07

Вы также, вероятно, захотите проверить длину строки в поле ввода, в противном случае вы рискуете вернуть огромный набор результатов!

1
12.12.2008 00:26:49
очень верная точка зрения - хотя это, вероятно, может быть сделано на стороне сервера. определенно проверьте пустую строку, хотя.
nickf 12.12.2008 00:31:12
Спасибо за ваш комментарий, в реальном приложении пустое поле является допустимым фильтром критериев (это означает показать мне все ), я делаю постраничные результаты, чтобы не было лишних затрат.
Jaime Febres 12.12.2008 20:31:40