Javascript 根据用户输入效率进行筛选。。诸如此类

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

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

约会

一段时间

表演

信息1

信息2

信息3

信息4

我阅读的XML总共有2135次显示，750次，146天。搜索节目名称的最佳方式是什么？我希望隐藏所有与输入字符串不匹配的显示；如果div.time不包含可见的显示（即该特定div.time下的no div.show与输入字符串匹配，则该容器也应隐藏；如果div.day不包含输入搜索的结果，则该父级也将隐藏

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

我还想指出的是，这种特殊的结构并不局限于我上面所写的内容。如果有更好/更有效的方法来构建指南，请务必通知我

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

编辑：

search:函数（选择器、字符串）{
字符串=$.trim（字符串）；
$（选择器）。每个（函数（）{
if（$（this.children（“p”）.text（）.search（new RegExp（string，“i”）））<0）{
$（this.hide（）；
}
否则{
$（this.show（）；
}
});
ctv.hideempty（“时间”）；
},
hideempty:函数（选择器）{
$（选择器）。每个（函数（）{
如果（$（this.children（“div”）是（“：hidden”））{
$（this.hide（）；
}
否则{
$（this.show（）；
}
});
}

---

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

2000+项可能会有相当多的记录保存在客户端的内存中，但是如果这些信息字段始终很小，则可能是可以管理的。但这可能是次要问题，而且您已经知道了认识到这个问题的解决办法

您现在可能面临的更大问题是，听起来您正在DOM中创建2135

show

DIV及其所有子对象，然后尝试动态显示和隐藏它们。这绝对会挑战浏览器，使事情变得缓慢和滞后

---

尝试只创建少量的

show

DIV，然后根据您的搜索和筛选结果替换这些DIV的内容。您可以使用类似ejs的模板系统来完成此操作，也可以自己完成。对于大型结果集，只需显示前N个显示，并在用户执行某些操作时加载其他显示（即通过滚动列表，或点击“显示更多结果”按钮）。

到目前为止，您对jQuery有什么看法？您提出了什么建议？您尝试了什么？我还希望能够按降序浏览节目（如实际的电视指南）。过滤只是我正在研究的一个功能。听起来像是向用户询问一个时间范围，然后让服务器处理返回的结果，然后通过搜索过滤客户端，这可能是我最终应该做的。将信息存储在javascript对象中，然后搜索该对象，而不是dom节点如何？您可以搜索、过滤和删除对客户端上维护的javascript对象集合进行排序，或者向服务器发出请求——这是一个单独的问题。重要的是，限制用于显示这些结果的DOM节点的数量。即使用户应该浏览2135个显示的列表，他们显然在任何时候都只能在屏幕上看到5个、10个或30个所以您只需要比那个么多的DOM节点多一点，然后根据需要循环使用。

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