Question

假设我有一个电视指南的结构：

<div class="day">
    <p>A Date</p>
    <div class="time">
        <p>A Time</p>
        <div class="show">
            <p>A Show</p>
            <div class="info1">
                <p>Info 1</p>
            </div>
            <div class="info2">
                <p>Info 2</p>
            </div>
            <div class="info3">
                <p>Info 3</p>
            </div>
            <div class="info4">
                <p>Info 4</p>
            </div>
        </div>
    </div>
</div>

我正在阅读的XML共有2135个节目，750次和146天。执行搜索节目名称的最佳方法是什么？我希望隐藏所有与输入字符串不匹配的节目;如果div.time不包含可见的节目（即在该特定div.time下没有div.show匹配输入字符串，那么该容器也应该被隐藏;如果div.day不包含输入搜索的结果那么父节点也是隐藏的。

首先我要说我知道如何通过JS / jQuery提供这个功能。但是，我可能不知道这样做的最佳方式。我一直在摆弄，当我开始隐藏不包含匹配（可见）展示容器的时间容器时，浏览器中的东西开始变得缓慢/滞后。

我还想提一下，这个特殊的结构不仅限于我上面所写的内容。如果有更好/更有效的方式来构建指南，那么请通知我。

还有一个更普遍的问题是：什么时候开始让服务器处理一些过滤是个好主意？如果2000+节点在客户端太多无法处理，我应该询问用户他们希望通过某种输入查看的天数吗？然后只返回客户端？

编辑：

search: function(selector, string) {
    string = $.trim(string);
    $(selector).each(function() {
        if ( $(this).children("p").text().search(new RegExp(string, "i")) < 0 ) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
    ctv.hideempty(".time");
},
hideempty: function(selector) {
    $(selector).each(function () {
        if ( $(this).children("div").is(":hidden") ) {
            $(this).hide();
        }
        else {
            $(this).show();
        }
    });
}

是我现在用来过滤的东西。然而，这正是我一直在玩的东西，可能肯定会有错误。

Answer 1

2000+项可能是在客户端中保存在内存中的相当多的记录，但如果这些信息字段一直很小，则可能是可管理的。但这可能是次要问题，您已经认识到该问题的解决方案。

你现在可能面临的更大问题是，听起来你在DOM中创建了2135 show DIV，与他们所有的孩子一起，然后尝试动态显示和隐藏它们。这绝对会挑战浏览器，让事情变得缓慢而且滞后。

尝试仅创建适度数量的show DIV，然后根据您的搜索和过滤结果替换这些DIV的内容。您可以使用像ejs这样的模板系统，或者自己动手。对于大型结果集，只显示前N个节目，并在用户执行某些操作时加载其他节目（即滚动列表，或点击“显示更多结果”按钮）。

过滤用户输入效率..和东西

1 个答案: