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

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

Ответ 1

При нажатии клавиши:
- Проверьте, существует ли существующий таймер - остановите его, если есть
- запустите таймер.
Когда таймер истекает, вызовите метод сервера.

var searchTimeout;
document.getElementById('searchBox').onkeypress = function () {
    if (searchTimeout != undefined) clearTimeout(searchTimeout);
    searchTimeout = setTimeout(callServerScript, 250);
};
function callServerScript() {
    // your code here
}

Ответ 2

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

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

Ответ 3

Вот простой способ, который будет работать без 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>

Ответ 4

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

Ответ 5

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

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

Ответ 6

спасибо за ваши отзывы. Я реализовал этот кусок кода, и кажется, что он выполняет задание (используя 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>