搜索过滤器应该使用getElementsByClassName吗？

Question

我有115个大小为120x120的div，每个div都有不同的背景图片。每个div都有多个类名，我仅用于搜索栏，使用getElementsByClassName。例如，想象一下有115个人，但是在搜索栏中输入“女性”将会隐藏所有男性，并仅显示女性。

这是做搜索过滤器的错误方式吗？我将div设置为display = "none"以隐藏它们，如果它们是被搜索的内容的一部分，则设置为block。我只是担心使用多个空类名作为搜索过滤器是否正确。这样做可以吗？还是有更方便的方法专门用于这种情况？

- Hate Names

---

当然，通常的解决方案是使用带脚本的数据库来应用查询。我认为你有一个有趣的替代方案。我不太清楚能否发表更多评论，除了指出与数据库方法相比，可能很难将其扩展或应用到未来的需求中。换句话说，答案至少在一定程度上取决于你的未来计划。 - Smandoli

感谢您提供的所有帮助！这是一个相当小的项目。一旦完成，就完成了。我不会时常添加东西。我永远不会想象使用超过150个div，这是绝不可能发生的。所以，您认为这不足以令人担忧，现在的状态很好吗？再次感谢您的帮助。 - Hate Names

你提到了数据库。除非你想要一个大型的学习项目，考虑使用像sqlLite.org这样的轻量级程序。更多信息请参见此处。 - Smandoli

Answer 1

我认为这是一个巧妙的方式，但它取决于情况。你会保持115个“项”还是打算添加更多？因为如果你打算添加更多，它可能不会很好地扩展。我认为已经太多了，不是因为搜索方法本身，而是因为你有超过100个隐藏的带有背景图像的div，消耗了所有浏览器资源。

你可以将项目存储在数据库表中，其中包含背景图像路径字段和关键字字段。当你执行搜索并仅显示具有匹配关键字的内容时，而不是隐藏所有不匹配的内容。

- federico-t

---

讨厌的名称 - 通常的方法是根据需要生成div，而不是隐藏它们。 - Smandoli

@HateNames 我强烈建议不要那样做。假设一开始它显示所有的div。然后，如果你进行一个指定div的搜索，你可以将它们移除以减轻浏览器的负担。如果需要的话，可以使用JavaScript再次“生成”它们。 - federico-t

@Smandoli -- 我明白了，我目前正在研究数据库以获得更多的知识。但我必须问一下，生成115个<div>是否也同样糟糕？假设一个人搜索一个名字，完全删除它，再搜索另一个名字，如此反复多次。每次他们删除整个搜索过滤器时，都必须重新生成所有115个<div>才能显示，对吗？把它们在开始时加载然后隐藏起来会减轻浏览器的负担吗？抱歉问了这么多问题，我只是真的很想学习更多关于这方面的知识。再次感谢您的帮助。 - Hate Names

@HateNames 嗯，你说得没错。当你“重置”搜索字段并且必须生成115个带有背景图像的div时，它会相当沉重。但这仍然比隐藏许多无用的div并浪费内存要好。 - federico-t

再次感谢大家的帮助。根据这个链接：http://taligarsiel.com/Projects/howbrowserswork1.htm#The_render_tree_relation_to_the_DOM_tree 如果你搜索关键词“none”，它会说这些对象不会被添加到DOM树中，也不会为它们生成任何框，而visiblity="hidden";则会做你所说的事情。无论如何，我会遵循Smandoli的建议，先用当前方法测试性能，然后再用数据库测试。我可能会坚持使用数据库，因为这只是一种更清洁的做事方式。非常感谢大家的帮助。 - Hate Names

Answer 2

你可以采用更基于数据的方法(我的意思是它们都是基于数据的...让我们说这更像一个数据库)，通过在JavaScript中保留一个包含115条记录的数组。因此，你实际上拥有了一个平面文件数据库。如果你的JavaScript技能足够好，这将有助于使用生成div而不是隐藏它们的方法，这将解决Campari提到的资源问题。 它实际上比你目前的解决方案更具可扩展性。一方面，你可以将数组保存在单独的.js或.ini文档中，以便轻松维护。

- Smandoli

---

由于我已经有了代码，所以采用这种方法对我来说很容易，只需要使用removeChild而不是将显示设置为none。但正如我在另一条评论中提到的那样，你们确定不断删除和重新生成<div>比仅仅将显示设置为none对浏览器的负载更小吗？非常感谢你们的帮助，抱歉打扰了。 - Hate Names

问题在于div是否被渲染。您可能需要使用浏览器工具来查看资源的处理方式（例如，Firebug）。 - Smandoli

谢谢你一直这么乐于助人，甚至还包括了一个我可以测试资源的工具。即使我已经知道它，也很高兴被告知各种提示而无需提问。再次感谢你的帮助。 - Hate Names

你非常有礼貌，真是一种享受。关于Firebug等工具 - 我发现它们很难理解，主要是因为报告非常深入。坚持下去 - 好处是巨大的。 - Smandoli