Question

I am using the following script to filter out divs that do not contain text in an inbox. (Similar to friends tab on Facebook)

$('#friend_search_form input').keyup(function(){
    var $searchString = $(this).val();
    $('.buddy').show();
    $('.buddy_name > a:contains('+$searchString+')').closest('.buddy').hide();
    console.log($searchString);  
})

The problem is when you are typing, it takes a lot of resources and get buggy.

What is the better way to write this?

Answer 1

Instead of running your code every keypress, why not wait until the user stops typing for a period of time?

var typingTimeout;

$('#friend_search_form input').keyup(function(e) { 
  if (typingTimeout != undefined) {
    clearTimeout(typingTimeout);
  }

  typingTimeout = setTimeout(function() {        
    var $searchString = $(this).val();

    $('.buddy').show();
    $('.buddy_name > a:contains('+$searchString+')').closest('.buddy').hide();
    console.log($searchString);  
  }, 500);
});