title: Is it possible to optimize Javascript client-side search?
body: <p>Here is the jQuery/Javascript code I'm using to sort through an unordered list of elements and remove them based on the user's query:</p>
  
  <pre><code>// event binding for the search filter
  $('.search-box').keyup(function(){
      var query = $(this).val().toLowerCase(),
          length = query.length;
  
      $('.friends-list li').each(function(){
          if(query.length &gt; 1 &amp;&amp; $(this).find('span').text().toLowerCase().substring(0, length) != query){
              $(this).hide();
          } else {
              $(this).show();
          }
      });
  });
  </code></pre>
  
  <p>Unfortunately, when I get a large number of li elements, this slows down considerably and sometimes hangs on the system. Is there a way to optimize this, or do all of the searching first and then remove the li elements all at one time so the system does not hang?</p>
  
  <p>When I do a server-side search, I can just have a loading spinner and a success callback, but the same does not seem to apply for the client-side.</p>