Question

I would like to add a feature to my search function that will execute a search n seconds after a keyup event is fired. The idea is that if someone stops tryping for a second or so, they won’t have to click the search button. So far I fire the search function on click, when the term is deleted, and on enter. I’ve marked in my code below where I’d like to have the timer thingy. I am asking this because it is almost 3am and JavaScript is hurting my head. Sorry if duplicate …

Here’s what I have:

$("#filter").keyup( function(e)
{
  var filter = $("#filter").val();

  if( filter == 0 || filter == '' || filter == null )
  {
    test();
  }
  else
  {
  *********** timer, then test();
  }

  if (e.which == 13)
  {
    e.preventDefault();
    test();
  }
});

Answer 1

$("#filter").keyup( function(e) {

  var filter = $("#filter").val(),
      timer = $('#filter').data('timeout'),
      n = 2;// the number of seconds to wait

  if(timer) {
      clearTimeout(timer);
      $('#filter').removeData('timeout');
  }

  if( filter == 0 || filter == '' || filter == null ) {
    test();
  } else if (e.which == 13) {
    e.preventDefault();
    test();
  }  else {
    $('#filter').data('timeout', setTimeout(test, 1000 * n));
  }      
});