Javascript 图形用户界面替代<；选择>；当你有很多选择的时候

A

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

最简单的选择是只需一个普通的

和大量的

就可以了，但它对用户不是很友好。有大量的滚动，可能很难找到您正在寻找的选项。这样做的好处是，您可以（可能通过滚动）查看所有选项

一个更高级的选项是使用自动完成的文本字段。用户键入一两个字母，搜索结果就会返回，您可以从中进行选择。如果你知道你在寻找什么，它会让你更容易找到你想要的选择。缺点是用户无法看到所有选项

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

您部署了哪些解决方案 这些情况？

有我应该知道的jQuery插件吗？

---

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

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

我喜欢使用的解决方案是为用户提供一个包含所有选项的选择列表（如果他们想查看），但提供一个自动完成功能，在用户键入列表时搜索列表。有点像你的第一和第二选择的混合体

至于插件，这里有一些（以及将引导您了解更多的文档）可以帮助您：

---

有一个用于jQuery的插件，在jQuery UI中也有。

您可以尝试jQuery插件。到目前为止，这是我的最爱，在不同的浏览器甚至ie6上都表现得很好。它可以很容易地设计，而且速度绝对快。它可以管理数千项，并且比jQuery UI的combobox autocomplete快

我已经看到一些很好的文本实现的一个可能的解决方案是在垂直列表上使用。网上有很多Flash和java示例。

如果选项自然地形成组，那么可以考虑使用JavaScript为基础的解决方案。它使大量选项更具组织性和可管理性，同时仍然保持所有选项可见

---

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

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

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

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

---

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

你应该看看Choosen 这是一个jQuery插件，可以生成一个更好的选择，并带有一个文本字段进行搜索。

---

此解决方案使用户无需滚动即可查看所有选项并搜索特定选项。

Dojo有一个FilteringSelect小部件，因此jQuery必须有一些功能……它将帮助您为自己的问题创建一个新问题！没有人会回答；）