2008-12-11 4 views
10

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

ответ

23
  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 
} 
+0

Убедитесь, что таймер имеет задержку, какую бы длинную вы не считал «сделанной набивкой», чтобы вы не ловили небольшие паузы. Кроме того, используйте событие onblur, чтобы увидеть, когда пользователь щелкнет текстовое поле. – Karl 2008-12-11 16:17:37

+0

Да, задержка должна зависеть от того, насколько интенсивным будет поиск, насколько он вам необходим, а также: как быстро ваши пользователи обычно печатают. Я использовал 250 мс для поиска, и это была прекрасная ИМО. – nickf 2008-12-11 16:20:30

+0

не должно быть событие onkeypress или что-то в этом роде? – 2008-12-11 18:12:59

0

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

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

5

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

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

0

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

2

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

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