Filtering Against User Input Efficiency.. And Stuff

Question

Let's say I have a structure as such for a television guide:

<div class="day">
    <p>A Date</p>
    <div class="time">
        <p>A Time</p>
        <div class="show">
            <p>A Show</p>
            <div class="info1">
                <p>Info 1</p>
            </div>
            <div class="info2">
                <p>Info 2</p>
            </div>
            <div class="info3">
                <p>Info 3</p>
            </div>
            <div class="info4">
                <p>Info 4</p>
            </div>
        </div>
    </div>
</div>

The XML I'm reading from has a total of 2135 shows, 750 times, and 146 days. What is the best way to go about performing a search for a show name? I wish to hide all shows that do not match the input string; if a div.time contains no visible shows (ie. no div.show under that particular div.time matches the input string then that container should be hidden as well; if a div.day contains no results from the input search then that parent is hidden as well.

Let me first say that I know how to provide this functionality through JS/jQuery. However, I may not know the most optimal way of doing so. I've been fiddling around and when I begin to hide the time containers that contain no matching (visible) show containers, things start to become slow/lag visibly in the browser.

I also want to mention that this particular structure is not limited to what I have written above. If there is a better/more efficient way to structure the guide then by all means please inform me.

A more general question to also ask is: when is it a good idea to start letting the server handle some of the filtering? If 2000+ nodes are too much to handle on the client-side should I ask the user a range of days they wish to view via some sort of input and then return only those to the client?

Edit:

search: function(selector, string) {
    string = $.trim(string);
    $(selector).each(function() {
        if ( $(this).children("p").text().search(new RegExp(string, "i")) < 0 ) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
    ctv.hideempty(".time");
},
hideempty: function(selector) {
    $(selector).each(function () {
        if ( $(this).children("div").is(":hidden") ) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
}

is what I'm using now to filter. However, this is just what I've been playing around with and there's probably bound to be bugs.

Answer 1

2000+ items might is a fairly large number of records to hold in-memory in the client, but it might be manageable if those info fields are consistently small. But that might be a secondary issue, and you already recognize the solution to that problem.

The bigger issue you're probably facing right now is that it sounds like you're creating 2135 show DIV's in the DOM, with all their children, and then trying to show and hide them dynamically. That's absolutely going to challenge the browser and make things slow and laggy.

Try only creating a modest number of show DIV's, and then replacing the contents of those DIV's based on your search and filter results. You could use a templating system like ejs for this, or just do it yourself. For large result sets, just show the first N shows, and load the others when the user does something (ie by scrolling through the list, or by hitting a 'Show More Results' button).