处理选择框中的大量数据答案

【问题标题】：Dealing with huge data in select boxes处理选择框中的大量数据
【发布时间】：2011-06-29 12:10:21
【问题描述】：

您好，我正在使用 jQuery 并从我的一个 mySQL 表中检索“项目”。我在该表中有大约 20,000 个“项目”，它将在我的表单中用作搜索参数。所以基本上他们可以搜索包含该“项目”的“购买”。

现在我需要他们能够从下拉列表中选择“项目”，但是用 20,000 个“项目”填充下拉列表需要很长时间。我想知道是否有任何支持自动完成下拉框分页的 jQuery 插件。

这样，用户可以开始输入前几个字母并过滤列表，或者只需单击箭头并查看大约 20 个项目，最后一个是“请单击以获取更多信息”。

我愿意接受任何其他关于处理庞大数据集和使用所述数据集填充 HTML 选择框的建议。

此搜索页面上可能有多个选择框，用户可以在其中选择“项目”或“客户”或任何类似的内容，然后点击“搜索”。

【问题讨论】：

当您有 20000 个项目时，是时候将其从下拉菜单中移出并移到允许搜索或其他内容的页面上的真实菜单中了。
真的会有人滚动浏览 20,000 个项目来找到他们的项目吗？我会推荐一个分页/排序/搜索字段或其他东西来为用户提供更好的体验。那是我的 $.02
如何使用带有 ajax 和服务器端查询的自动完成/建议。并不是说您应该切换 js 框架，而是查找 dojo 的 FilteringSelect 的示例，这正是您连接到 QueryReadStore 时想要的。我想 Extjs 也有类似的东西。
是的，我在很多项目中都使用过 Dojo，这就是我想到使用选择框进行分页和自动完成的地方。我正在为我当前的项目使用 jQuery，很高兴知道它们也具有自动完成功能。这可能对我有用。谢谢大家！

【解决方案1】：

我认为没有特定的插件可以满足您的需求，但您应该可以很容易地自己编写一个。

基本上这个概念是这样的：

使用 jQuery $.ajax 从数据库中检索数据
将 2 个参数从 jQuery 传递到您的数据库 SELECT 语句
- 关键字
- 页面索引
搜索以关键字开头的所有项目（自动完成），但只返回特定数量的结果（即 20）
在下拉列表中填充结果后，检查确实有超过 20 个项目，并附加一个名为 请点击查看更多... 的额外 <option> >
通过检查它的索引并使用下拉列表onchange 事件将相同的$.ajax 调用绑定到<option>（它的索引将为20，因为它是列表中的第21 项）并增加您发送到的pageIndex数据库

如果您在PHP/mySQL 中的分页方面需要更多帮助，请查看此tutorial。

【讨论】：

【解决方案2】：

对于这么大的数据集，是时候使用 Ajax...

查看这些自动完成插件：

和

【讨论】：

【解决方案3】：

对于任何类型的下拉列表来说，20000 个项目都太大了，除非该列表只带回项目以响应搜索，最好是其中至少包含几个字符的搜索。 “点击更多”似乎很弱，不是下拉菜单的典型行为。如果用户想要的项目是列表中的 10000 个项目怎么办？

假设您的项目是简单的名称/值对（字符串名称、整数 ID 等）。

然而，JSON 可以以轻量级的方式表示 20000 个项目。您可以创建一个简单的客户端对话框（或列表），它绑定到这些项目，通过它们进行页面，并提供实时过滤。这绝对是可能的（我已经做到了），但它需要大量的自定义脚本或现有控件。

这种方法的好处是您可以在每次击键时进行实时搜索。令人惊讶的是，JavaScript 将非常轻松地处理对大型数据集的简单搜索。

如果性能是关键，20000 项仍然太大，即使在 JSON 中也是如此。将客户端脚本与服务器代码相结合，用于搜索、过滤、分页等，并且只向用户呈现有限的结果集。

编辑：如果您不想编写自己的数据表控件，这是使用 JSON 的网格的一个可能选项：http://developer.yahoo.com/yui/examples/datatable/

【讨论】：