当你有很多选项</select>时，GUI替代<select>

Question

<select>可能适合选择3-15个简单项目，但是你如何处理15-100 +？

最简单的选项就是拥有一个包含大量<select> s的普通<option>，但它不是非常用户友好。有很多滚动，可能很难找到你正在寻找的选项。好处是您可以（可能使用滚动）查看您拥有的所有选项。

更高级的选项将是一个包含自动填充功能的文本字段。用户输入一两个字母，然后您可以选择搜索结果。它可以让您更轻松地找到所需的选项 - 如果您知道 正在寻找什么。缺点是用户无法看到所有选项。

更高级的选项将构建一个“搜索，列表和选择”窗口小部件，默认显示X项，但允许您搜索。这种方法的一个优点是我可以允许搜索多个属性，而不仅仅是要选择的项目的名称。

1. 您部署了哪些解决方案 这些情况？
2. 我应该知道一个jQuery插件吗？

Answer 1

1. 我喜欢使用的解决方案是为用户提供包含所有选项的选择列表（他们是否应该查看它），但提供自动完成功能，可在列表中搜索列表。排序第一和第二选项的混合。
2. 至于插件，那里有一些（以及可以引导您更多的文档）可以帮助您：
   • http://plugins.jquery.com/project/jquery-select-autocomplete
   • http://docs.jquery.com/Plugins/Autocomplete/autocomplete
   • http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/

Answer 2

你可以试试Unobtrusive Fast-filter Dropdown (UFD) jquery插件。这是迄今为止我最喜欢的，并且在不同的浏览器中表现得非常好，甚至ie6。它很容易设计，绝对是快速的。它可以管理数千个项目，并且比jQuery UI的组合框自动完成更快

Answer 3

你应该看一下Choosen http://harvesthq.github.io/chosen 这是一个jQuery插件，可以生成一个更好的选择，并带有要搜索的文本字段。 该解决方案允许用户查看所有选项并特别搜索，而无需滚动。

Answer 4

jQuery有Autocomplete plugin，jQuery UI中有Autocomplete。

Answer 5

jQuery UI具有AutoComplete控件。您可以将回调函数与数据源绑定在一起，并使用Ajax来提取大型数据集。

Answer 6

我看到一些可行的解决方案是在垂直列表上使用的fish eye selector。在线有很多javascript/CSS，Flash和Java示例。

Answer 7

如果选项自然形成组，您可以考虑使用HTML optgroups而不是基于javascript的解决方案。它使大量选项更加有条理和易于管理，同时仍然保持所有选项可见。

我不知道您用来生成HTML的服务器端语言/框架，但是在Ruby on Rails中，您可以使用grouped_options_for_select自动生成optgroup。

Answer 8

当有许多选项可供选择时，我喜欢自动完成选择。我找到了一个jQuery示例here。

Answer 9

我按照以上答案中的建议尝试了以下内容：     plugins.jquery.com/project/jquery-select-autocomplete     docs.jquery.com/Plugins/Autocomplete/autocomplete     jquery-ui.googlecode.com/svn/branches/labs/selectmenu/     不引人注目的快速过滤器下拉（UFD）

我发现UFD是我最喜欢的那个，因为它最像下拉式并且内置了很多功能，其他的也有点儿。

但它仍然没有给我浏览器的一致性。我希望它在所有浏览器中以相同的方式工作。例如：   在普通的select元素中，如果我输入第一个字母，它将带我到以该字母开头的第一个选项，如果我然后按Enter键，它将选择它，但这里是它与浏览器的不同之处。有些浏览器会在Enter命中时触发onchange事件，有些浏览器会在下拉列表失去焦点之前触发。

UFD没有我正在寻找的“onchange”一致性