1

我有一个看起来像这样的网页（简化示例）

<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>

我在那个页面上也有一些 javascript，看起来像这样

$("#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();
});

这实现了一个基本的文本过滤器，当用户在搜索字段中输入字母时，不匹配的行被隐藏，匹配的行显示。一个简单的表格搜索。

问题是，如果表中有几百行，这种简单的实现就会遇到性能瓶颈。行并不总是响应键盘，或者键盘中的输入会阻塞，直到表格跟上为止。

是否有“已知的科学”以高性能的方式实现这种功能？我自己可以想出一些不同的方法，但想确保在开始之前我没有重新发明一个已经解决的问题。

4

1 回答 1

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.

于 2012-07-20T20:41:38.640 回答