Question

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

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

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

问题是，如果表中有几百行，这种天真的实现会遇到性能瓶颈。在表已经赶上之前，这些行并不总是响应键盘或键盘块中的输入。

是否存在以知名方式实现此类功能的“已知科学”？我自己可以想到一些不同的方法，但是为了确保在开始之前我没有重新发明已经解决的问题。

Answer 1

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

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

优化jQuery表搜索

1 个答案: