jQuery 处理选择框中的大量数据

Dealing with huge data in select boxes

提问by Girish Dusane

Hi I am using jQuery and retrieving "items" from one of my mySQL tables. I have around 20,000 "items" in that table and it is going to be used as a search parameter in my form. So basically they can search for "purchases" which contain that "item".

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

Now I need them to be able to select the "item" from a drop down list, but it takes pretty long to populate a drop down list with 20,000 "items". I was wondering if there was any jQuery plugin out there which supports pagination for drop down boxes with autocomplete.

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

That way the user can either start typing the first few letters have the list filtered, or just click on the arrow and see maybe 20 items, and the last is "Please click for more".

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

I am open to any other suggestion for dealing with huge dataset and populating HTML select boxes with said dataset.

我对处理庞大数据集和使用所述数据集填充 HTML 选择框的任何其他建议持开放态度。

There might be multiple select boxes on this search page where a user can select an "item" or a "customer" or anything along those lines and then click on "Search".

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

采纳答案by jpstrikesback

With a dataset that large it's time to use Ajax...

有了这么大的数据集，是时候使用 Ajax 了……

check out these autocomplete plugins:

查看这些自动完成插件：

http://www.pengoworks.com/workshop/jquery/autocomplete.htm

http://www.pengoworks.com/workshop/jquery/autocomplete.htm

and

和

http://code.google.com/p/jquery-autocomplete/

http://code.google.com/p/jquery-autocomplete/

回答by Marko

I don't think there's a specific plug-in for what you're after but you should be able to write one yourself pretty easily.

我认为没有针对您所追求的特定插件，但您应该能够很容易地自己编写一个插件。

Basically the concept is this:

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

• Use jQuery $.ajaxto retrieve data from your database
• Pass 2 parameters from jQuery to your database SELECT statement
  • Keyword
  • PageIndex
• Search for all items starting with the Keyword (autocomplete) but only return a specific number of results (i.e. 20)
• Once you populate the results in the Drop Down, check that there are indeed more than 20items and append an extra <option>called Please click for more ...
• Bind the same $.ajaxcall to that <option>by checking it's index and using the dropdowns onchangeevent (it's index will be 20 because it's the 21st item in the list) and increase the pageIndex that you send to the database

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

If you need more help with paging in PHP/mySQLcheck out this tutorial.

如果您在分页方面需要更多帮助，PHP/mySQL请查看本教程。

回答by Tim Medora

20000 items is too large for any sort of dropdown list, unless the list only brings back items in response to a search, preferably a search with at least a few characters in it. "Clicking for more" seems weak and is not the typical behavior of a dropdown. And what if the item the user wants is 10000 items down the list?

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

Assuming that your items are simple name/value pairs (string name, integer ID or the like).

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

JSON however can represent 20000 items in a lightweight fashion. You could create a simple client-side dialog (or list) which binds to those items, pages through them, and provides real-time filtering. This is definitely possible (I've done it) but it requires a fair amount of custom scripting or an existing control.

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

The upside to this approach is that you can have real-time search on every keystroke. Surprisingly, JavaScript will handle simple searches on large data sets quite easily.

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

If performance is key, 20000 items is still way too big, even in JSON. Combine client-side script with server code for searching, filtering, pagination, etc and only present the user with a limited set of results.

如果性能是关键，即使在 JSON 中，20000 个项目仍然太大。将客户端脚本与服务器代码结合起来进行搜索、过滤、分页等，并且只向用户展示有限的结果集。

EDIT: In case you don't want to write your own data table control, here's one possible option for a grid which consumes JSON: http://developer.yahoo.com/yui/examples/datatable/

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