Optimizing jQuery Script to Hide/Show Items in 1000-Item Set Based on Live Text Input
<p>I wrote the following script for a page which has been loaded with a data set of about 1000 items (all in one server call--no AJAX).  <strong><em>On each keyup</em></strong> the script converts the text input into a CSS-standards-friendly string (removes spaces, downcases, etc.), then matches that string with CSS classes that I've loaded each item with, and adjusts the "hide" or "show" accordingly for that element.</p>

<pre><code>$(document).ready(function(){
    $('ul.players li').hide();      
    $("#filter-input").keyup(function () {
        var lowercase = $(this).val().toLowerCase();
        var spaced = lowercase.replace(/[ _]/, '-');
        var outputString = spaced.replace(/[^a-z-]/i, '');
        $('ul.players li').hide();      
        $('ul.players li[class*="'+outputString+'"]').show();
    });
});
</code></pre>

<p>Example of HTML this is working on:</p>

<pre><code>&lt;form&gt;
    &lt;input id="filter-input" type="text" /&gt;
&lt;/form&gt;
&lt;ul class="players"&gt;
    &lt;li class="firstname lastname teamname position cityname"&gt;
        &lt;div&gt;Basic player info here...&lt;/div&gt;
    &lt;/li&gt;
&lt;/ul
</code></pre>

<p>The script is working just fine (in the simple capacity that I need it to work)--but it's very laggy.  <strong>What can I do to optimize this for performance?</strong></p>

<p><em>(Obviously, there are a lot of class switches across those many elements--I don't think I can avoid that--but maybe there's something to be done about the string conversions)</em></p>
