当您有很多选项时,GUI替代<select>

Question

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

最简单的选择是只有一个<select>带有很多<option>s 的平原,但它不是非常用户友好.有很多滚动,可能很难找到你正在寻找的选项.好处是您可以(可能使用滚动)查看您拥有的所有选项.

更高级的选项是使文本字段具有自动完成功能.用户输入一两个字母,然后您可以选择搜索结果.它可以让您更轻松地找到您正在寻找的选项 - 如果您知道自己在寻找什么.缺点是用户无法看到所有选项.

更高级的选项是构建一个"搜索,列表和选择"小部件,默认显示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/