0

我有很多项目和一些输入的 UL 列表。我的脚本监听输入并显示或隐藏与输入字符串匹配的字段。

这是我的代码：

$(function(){
    $('#srvSearchField').keyup(function(){
        var value = $(this).val();

        $('.srvClientBlock').each(function(){
            var currentFieldValue = $(this).children('.srvClientName').html();
            var exp = new RegExp(value);

            if (currentFieldValue.match(exp)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    });
});

我怎样才能提高性能？或者我应该在我的服务器上发送请求以查找匹配值？

UPD：我决定使用 ajax 来过滤客户端。

var url = "<?php echo $searchClientUrl;?>";

$(function(){
    $('#srvSearchField').keyup(function(){
        var request = $(this).val();

        var callback = function(response) {
            $('.srvClientBlock').hide();

            var data = JSON.parse(response);
            for (var i = 0; i < data.length; i++) {
                $('#srvClient-' + data[i]).show();
            }
        };

        $.post(url, {"request" : request}, callback);
    });
});

谢谢大家的回答。

4

2 回答 2

5

几点：

  • 不要为每个搜索到的列表项重新创建正则表达式。
  • 使用test正则表达式的方法而不是match.
  • 将搜索到的文本 (srvClientName) 缓存在某处，这样您就不必经常查询 DOM。
  • 您甚至可以将其缓存在 DOM 之外，因此您只需要在需要切换显示时访问它（请参阅此答案以获取示例）。
  • 如果 DOM 更新仍然需要太长时间，请考虑 a) 在操作期间隐藏完整的 UL b) 仅在其计数低于某个数字时才显示任何结果

当然，缓存仅适用于您的列表内容不动态更改（或者至少您每次都需要重建缓存）的情况。

为每次搜索向服务器发送请求仅在某些情况下才有意义：

  • 有限的（移动）客户端资源导致无法存储和/或处理大量数据
  • 限制带宽，禁止下载整个数据
  • 服务器上的实时数据（不能连续发送到客户端）

但是它们需要足够的带宽来处理许多请求和相对较小的延迟。不过，您可以通过特殊优化来解决这些问题。

// simple improvements, no caching:
$(function(){
    $('#srvSearchField').keyup(function(){
        var exp = new RegExp( $(this).val() );
        $('.srvClientBlock').each(function(){
            var $this = $(this);
            var currentFieldValue = $this.children('.srvClientName').text();
            $this[ exp.test(currentFieldValue) ? "show" : "hide" ]();
        });
    });
});
于 2013-06-06T12:42:05.393 回答
1

如果您可以避免 ajax 请求，请这样做。您可能需要使用它们，但如果您遇到客户端问题，浏览器只能处理这么多数据。

如果您需要处理 ajax 请求或大量数据，请将您的 keydown 事件设置为启动 100-300 毫秒的超时，该超时会在每次后续 keydown 时重置并重新启动，这反过来又会调用您的搜索功能。这样，您的搜索将仅在用户空闲 200 毫秒时运行（不多，但足以大大减少搜索调用的数量）。

于 2013-06-06T12:39:12.517 回答