优化 jQuery 表搜索答案

【问题标题】：Optimizing a jQuery Table Search优化 jQuery 表搜索
【发布时间】：2012-07-20 20:38:52
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： javascript jquery performance dom

【解决方案1】：

是的，设置一个约 0.5 秒的打字超时，当有新键进入时重置计时器。超时结束后，结果会更新。没有人会在实际输入单词时看到结果。

虽然这实际上并没有提高性能，但它大大提高了可用性。

【讨论】：