Fastest way to remove/hide a lot of elements from a list
<p>I have a dropdown that contains around 100,000 rows which make up a list.</p>

<pre><code>&lt;input id="search" type="text" /&gt;
&lt;ul&gt;
    &lt;li&gt;item 1&lt;/li&gt;
    &lt;li&gt;item 2&lt;/li&gt;
        ...
    &lt;li&gt;item 100,000&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>I have a text box which acts as a search, so as you type it matches the input to items in the list, removing what does not match. This is the class I wrote to perform the removing of list elements.</p>

<p><a href="http://jsfiddle.net/bWtpy/10/">See the fiddle (list has about 2000 items)</a> </p>

<pre><code>// requires jQuery
var Search = (function(){

    var cls = function (name) {
        var self = this;

        self.elem = $('#' + name);
        self.list = $('#' + name).next('ul').children();
        self.elem.bind('keyup', function () { self.change(); }); 
    };

    cls.prototype = {
        change: function () {
            var self = this;
            // gets the closest ul list
            var typed = self.elem.val();

            // only do something if there is something typed
            if (typed !== '') {
                // remove irrelevent items from the list
                self.list.each(function () {
                    var item = $(this).html();
                    if (item.indexOf(typed) === -1)  {
                        $(this).addClass('zero');
                        // tried using a class with visibility hidden
                    } else {
                        $(this).removeClass('zero');
                    }
                });
            } else {
                // check what list items are 'hidden' and unhide them
                self.list.each(function () {
                    if ($(this).hasClass('zero')) {
                        $(this).removeClass('zero');
                    }
                });
            }
        }
    };
    return cls;
}());
</code></pre>

<p>I am just adding a class which adds a height of 0, and no margin,padding, etc, but I have also tried using visibility:hidden. I have also tried using the detach method in jQuery but this is about the same in terms of speed. </p>

<p>Are their any JavaScript experts who can see any problems with the code, or offer some optimization techniques?</p>
