Определите, когда пользователь печатает - PullRequest
Новая
       7

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

12 голосов
/ 11 декабря 2008

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

Ответы [ 6 ]

24 голосов
/ 11 декабря 2008
  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
}
5 голосов
/ 11 декабря 2008

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

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

2 голосов
/ 11 декабря 2008

Вот простой способ, который будет работать без 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>
1 голос
/ 12 декабря 2008

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

0 голосов
/ 11 декабря 2008

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...