Javascript JQuery - Как встроить задержку в поисковой записи

Question

У меня есть окно поиска ajax, которое отправляется на сервер при каждом нажатии клавиши и возвращает результат поиска. Когда пользователь быстро печатает, я хочу искать только по последней записи, а не по каждому нажатию клавиши. В противном случае отдельные результаты вспыхивают, и весь процесс замедляется.

Например: если пользователь быстро набирает «Статуя свободы», я не буду искать слова «sta», «stat», «statu» и т. Д.

Основы моего кода jQuery:

$('#searchbox').keyup(function(){
    if (this.value.length > 2) {    
        $.post("remote.php",{'partial':this.value},function(data){
            $("#gen_results").html(data);
        });
    }
});        


<input id="searchbox" />
<div id="gen_results"></div>

Answer 1

использовать setTimeout или плагин автозаполнения jQuery

var timer;
$('#searchbox').keyup(function(){
    if (this.value.length > 2) {
        if (timer){
                clearTimeout(timer);
        }
        timer = setTimeout(function(){
                $.post("remote.php",{'partial':this.value},function(data){
                $("#gen_results").html(data);
                });
        }, 1000);
    }
});

Answer 2

Вам нужно использовать время ожидания, оно установлено на 500 мс, но вы, возможно, захотите ускориться.

$('#searchbox').keyup(function(){
  window.clearTimeout(window.timeOutId);
  window.timeOutId = window.setTimeout(function() {
    if (this.value.length > 2) {    
      $.post("remote.php",{'partial':this.value},function(data){
       $("#gen_results").html(data);
      });
    }
  },500); 
}); 

Надеюсь, что это работает для вас!

Answer 3

Попробуйте это

var inProgress = false;
$('#searchbox').keyup(function(){
    if (this.value.length > 2 && !inProgress) {    
        inProgress  = true;
        $.post("remote.php",{'partial':this.value},function(data){
            $("#gen_results").html(data);
            inProgress = false;
        });
    }
}); 

Таким образом, вам не нужно поддерживать таймер, просто еще один вызов, если предыдущий вызов завершен и к тому времени пользователь набрал что-то большее.

Answer 4

У вас может быть глобальная переменная, содержащая метку времени последнего нажатия клавиши. Когда вызывается метод keyup, возьмите отметку времени и сравните ее с предыдущим значением. Если это по истечении определенного периода времени, сделайте ваш звонок, в противном случае сбросьте глобальное значение и выйдите.

Answer 5

Я однажды сделал нечто подобное. Я установил таймер каждые 500 мс, и когда таймер вызывается, он выполняет запрос AJAX. Хитрость в том, что всякий раз, когда пользователь что-то печатал, я сбрасывал таймер.

Answer 6

function getResults(value) {
   return function() {
       $.post("remote.php",{'partial':value},function(data){
           $("#gen_results").html(data);
       });
   };
}

var timerId;
$('#searchbox').keyup(function(){
    if (this.value.length > 2) {
          clearTimeout(timerId);
          timerId = setTimout(getResults(this.value), 1000);
    }
});  

Answer 7

Вместо того, чтобы строить это самостоятельно, взгляните на плагин jQuery Autocomplete .

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

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