当您有很多选项时，<select> 的 GUI 替代品答案

【问题标题】：GUI alternative to <select> when you have a lot of options当您有很多选项时，<select> 的 GUI 替代品
【发布时间】：2011-07-13 01:58:03
【问题描述】：

<select> 可能适合在 3-15 个简单项目之间进行选择，但如何处理 15-100+？

最简单的选择是只使用一个普通的<select> 和很多<option>s，但它对用户不是很友好。有很多滚动，可能很难找到您正在寻找的选项。好处是您可以（也许通过滚动）查看您拥有的所有选项。

更高级的选项是有一个带有自动完成功能的文本字段。用户输入一两个字母，搜索结果就会返回，您可以从中选择。它可以让您更轻松地找到您正在寻找的选项 - 如果您知道自己在寻找什么。缺点是用户无法看到所有选项。

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

您部署了哪些解决方案这些情况？
有没有我应该知道的 jQuery 插件？

【问题讨论】：

Dojo 有一个 FilteringSelect 小部件，所以 jQuery 一定有一些东西...

标签： javascript jquery html css user-interface

【解决方案1】：

我喜欢使用的解决方案是为用户提供一个包含所有选项的选择列表（如果他们想要查看它），但提供一个自动完成功能，在他们输入时搜索列表。有点像您的第一个和第二个选项的混合体。
至于插件，这里有一些可以帮助您的数字（以及将引导您了解更多信息的文档）：

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

在 jQuery 中有一个 Autocomplete plugin，在 jQuery UI 中有一个 Autocomplete。

【讨论】：

【解决方案5】：

jQuery UI 有一个AutoComplete 控件。您可以将其与作为数据源的回调函数绑定在一起，并使用 Ajax 拉入大型数据集。

【讨论】：

【解决方案6】：

我见过一些好的文本实现的一个可能的解决方案是在垂直列表中使用fish eye selector。网上有很多javascript/CSS、Flash和Java的例子。

【讨论】：

【解决方案7】：

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

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

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

我已按照上述答案中的建议尝试了以下方法： plugins.jquery.com/project/jquery-select-autocomplete docs.jquery.com/Plugins/Autocomplete/autocomplete jquery-ui.googlecode.com/svn/branches/labs/selectmenu/ 不显眼的快速过滤器下拉 (UFD)

我发现 UFD 是我最喜欢的一个，因为它的行为最像一个下拉菜单，并且内置了很多多功能性，而且其他的都有点错误。

但它仍然没有让我在浏览器之间保持一致。我希望它在所有浏览器中都以相同的方式工作。例如：在一个普通的选择元素中，如果我输入第一个字母，它将带我到以该字母开头的第一个选项，如果我然后按 Enter，它将选择它，但这里是不同浏览器不同的地方。有些浏览器会在按下 Enter 时触发 onchange 事件，而有些浏览器直到下拉菜单失去焦点才会触发。

UFD 没有我想要的“onchange”一致性

【讨论】：

它将帮助您为自己的问题创建一个新问题！没有人会回答一个答案;）