Question

I have a web-page that looks like this (simplified example)

<table id="events_results_table">
    <thead>
        <tr>
            <th class="header">Title One</th>
            <th class="header">Title Two</th>
        </tr>
    </thead>
    <thead>
        <tr>
            <td><input id="search" type="text" /></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>value 1</td>
            <td>...</td>
        </tr>
        <tr>
            <td>value 2</td>
            <td>...</td>
        </tr>
    </tbody>
</table>

I also have some javascript on that page that looks like this

$("#search").keyup(function(event){
    var theText = $('#search').val();
    $('#events_results_table tbody tr td').closest('tr').hide();
    $('#events_results_table tbody tr td:contains("'+theText+'")').closest('tr').show();
});  

This implements a rudimentary text filter where, as the user types letters into the search field, rows which do not match are hidden, and rows that do match show. A simple table search.

The problem is, this naive implementation suffers from a performance bottleneck if there’s a few hundred rows in the table. The rows don’t always respond to the keyboard, or the input in the keyboard blocks until the table has caught up.

Is there “known science” for implementing this sort of functionality in a performant way? I can think of a few different approach myself, but wanted to make sure I wasn’t reinventing an already solved problem before I started.

Answer 1

Yes there is, setting a ~0.5 second timeout on typing, resetting the timer when a new key comes in. When the timeout finishes, the results are updated. No one will watch the results while actually typing a word.

While this doesn’t actually improve performance, it improves the usability a lot.