大数据集的筛选下拉菜单

Question

4

我正在寻找一种方法或插件，能够处理大量数据（约10,000行），并创建一个可通过输入筛选或一次滚动浏览所有记录的组合框/下拉框。

我已经尝试了不同的插件以及编写自己的代码。有很多很好的选择，但是当数据集变大时，这些选项的性能会迅速下降。

我一直在尝试 chosen。然而，我的担忧是当有10,000条记录时，搜索性能会导致输入延迟，并且如果您尝试输入过快，可能会锁定浏览器。此外，查看chosen的github页面，似乎最近没有进行太多开发。

浏览器要求为IE 7+（由于JavaScript性能较差，IE实际上是最大的问题）和FF（Chrome和Safari是额外的奖励）。

这里是一个 jsfiddle，有点类似于我将要使用的数据类型。我还添加了chosen插件，以便您可以看到它的性能。

- Andy E

不是答案，但也许你需要重新思考你的用户界面。用户真的想要/需要看到10K个项目吗？你能把这些项目分成几组吗？那么当用户选择一个组时，使用AJAX填充第二个框。只是一个想法。 - 001

看我的评论，针对这个特定的用例，它并不能很好地分成组，因此需要过滤选项。我完全支持通过不同的方式达到解决方案。 - Andy E

那么你可以使用分页。首先填充列表的前100个或者更多。添加一个“下一页”按钮，当点击时使用Ajax获取下一个100个，以此类推。 - 001

2个回答

1

你确定将如此大量的数据加载到客户端并在那里处理是个好主意吗？难道不像大多数开发人员通常做的那样，在服务器上处理输入，通过ajax加载所需数据会更好吗？

现在的JS虽然快，但也没有那么快。

- Serge Kuharev

我肯定愿意实现一些东西，让用户在滚动或搜索时有所有记录可用的错觉，就像无限滚动表格遇见筛选下拉框一样。 - Andy E

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marc Wilson · Accepted Answer

您可能想考虑使用Datatables作为备选方案。它非常流畅 - 您可以拥有一个漂亮的表格布局（您提到“行”所以我假设是表格数据而不是单列），并且过滤器是“智能/原子性”的 - 例如，如果您在搜索框中输入“红色汽车”，它将给您所有包含红色和汽车的行，但不一定是在一起的。

它还有各种插件，包括使用滑块的分页器，对于大量页面计数非常有用。我曾经用2000多条记录运行它，只要您的PC有足够的RAM，它就非常快。它也支持通过AJAX进行动态分页。

它还实现了“无限滚动”，只需进行几个参数更改和一两个AJAX调用即可。