Поиск с задержкой ввода jQuery

#jquery

Вопрос:

У меня есть этот код, чтобы скрыть каждый .flip элемент, кроме того, который я искал:

 var $rows = $('.flip'); 
$('#search').keyup(function() 
{
    var val = $.trim($(this).val()).replace(/  /g, ' ').toLowerCase();  
    $rows.show().filter(function()                                      
    {
        var text = $(this).text().replace(/s /g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();  
});

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

Спасибо!

1. Используйте change событие вместо keyup .

2. @Azim change является рискованным, некоторые браузеры / платформы запускают его только после того, как элемент теряет фокус, что обычно не то, что вы хотели бы использовать в функции поиска.

3. keyup и change не будет вставлять текст, например, с помощью мыши, поэтому он должен использовать input событие.

Ответ №1:

Просто используйте setTimeout

 $(document).ready(function() {
  var timer;

  var $rows = $('.flip');
  var $self = $(this);

  $('#search').keyup(function() {
    clearTimeout(timer);

    timer = setTimeout(function() {
      $('#test').text(Math.floor(Math.random() * 1000));
      var val = $.trim($self.val()).replace(/  /g, ' ').toLowerCase();

      $rows.show().filter(function() {
        var text = $(this).text().replace(/s /g, ' ').toLowerCase();
        return !~text.indexOf(val);
      }).hide();
    }, 300);
  });
})

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search"/>
<span id="test"></span>

1. @Hiroo17 Мой пример вам не подходит? Ошибки консоли?

2. Ваш пример работает нормально, но в тот момент, когда я внедряю его в свой код, он не работает.

3. Должно быть, у меня где-то есть fckd. В любом случае. Ваш код должен работать, поэтому я отмечаю его как решение.

Ответ №2:

Вам нужно использовать debounce, я предлагаю для этого Lodash.

Я использую его следующим образом:

 var debounce = _.debounce(search, 500, false);

$('#search-input').on('change', function() {
  debounce(this);
});

function search(input) {
  if(input.value.length > 2) {
    ...
  }
}

_.debounce выполнит работу по ожиданию, пока пользователь перестанет вставлять значение.

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

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

Третий параметр — это опция для настройки, использование false заставит его отправлять последнее введенное значение.