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

标签 javascript jquery html css user-interface

A <select>可能适合在 3-15 个简单元素之间进行选择,但您如何处理 15-100 个以上的元素?

最简单的选择 就是使用普通的 <select>有很多 <option> s,但它不是很用户友好。有很多滚动,可能很难找到您正在寻找的选项。好处是您可以(可能需要滚动)查看您拥有的所有选项。

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

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

  1. 您部署了哪些解决方案 这些情况?
  2. 是否有我应该了解的 jQuery 插件?

最佳答案

  1. 我喜欢使用的解决方案是为用户提供一个包含所有选项的选择列表(如果他们想浏览它),但提供一个自动完成功能,可以在他们输入时搜索列表。有点像您的第一个和第二个选项的混合体。
  2. 至于插件,这里有一些可以帮助您的插件(以及可以引导您获得更多信息的文档):

关于javascript - 当您有很多选项时,GUI 替代 <select>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5266250/

相关文章:

javascript - 在多个 <select> 列表中换行文本

javascript - 单击不是函数错误

javascript - 如何让 jQuery 改变滚动条上的导航颜色?

javascript - 隐藏在第一个和第二个选择列表中选择的第三个选择列表的选项

php - Plesk (Linux) 的自定义 .htaccess 404 页面

javascript - Greasemonkey - 集成滚动和鼠标点击操作

javascript - Grid.MVC 禁用嵌入按钮的 onrowselect

javascript - 如何使用 jquery 从类中获取 css 属性

javascript - 我的 JS 程序无法运行

javascript - 无法更新子 Controller 作用域变量