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表中检索“items”。我在该表中有大约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".
此搜索页面上可能有多个选择框，用户可以选择“项目”或“客户”或这些行中的任何内容，然后单击“搜索”。
3 个解决方案
#1
4
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/
#2
4
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 - 使用jQuery $ .ajax从数据库中检索数据
- Pass 2 parameters from jQuery to your database SELECT statement
- Keyword
- 关键词
- PageIndex
- PageIndex的
- 将2个参数从jQuery传递到数据库SELECT语句Keyword PageIndex
- Search for all items starting with the Keyword (autocomplete) but only return a specific number of results (i.e. 20)
- 搜索以关键字（自动填充）开头的所有项目，但仅返回特定数量的结果（即20）
- Once you populate the results in the Drop Down, check that there are indeed more than 20 items and append an extra
<option>called Please click for more ... - 在Drop Down中填充结果后，检查确实有超过20个项目，并附加一个额外的
- Bind the same
$.ajaxcall to that<option>by checking it's index and using the dropdownsonchangeevent (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 - 将相同的$ .ajax调用绑定到该
If you need more help with paging in PHP/mySQL check out this tutorial.
如果您需要有关PHP / mySQL分页的更多帮助，请查看本教程。
#3
2
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/
#1
4
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/
#2
4
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 - 使用jQuery $ .ajax从数据库中检索数据
- Pass 2 parameters from jQuery to your database SELECT statement
- Keyword
- 关键词
- PageIndex
- PageIndex的
- 将2个参数从jQuery传递到数据库SELECT语句Keyword PageIndex
- Search for all items starting with the Keyword (autocomplete) but only return a specific number of results (i.e. 20)
- 搜索以关键字（自动填充）开头的所有项目，但仅返回特定数量的结果（即20）
- Once you populate the results in the Drop Down, check that there are indeed more than 20 items and append an extra
<option>called Please click for more ... - 在Drop Down中填充结果后，检查确实有超过20个项目，并附加一个额外的
- Bind the same
$.ajaxcall to that<option>by checking it's index and using the dropdownsonchangeevent (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 - 将相同的$ .ajax调用绑定到该
If you need more help with paging in PHP/mySQL check out this tutorial.
如果您需要有关PHP / mySQL分页的更多帮助，请查看本教程。
#3
2
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/