web ui:如何为多选提供大型列表

时间:2008-12-12 17:41:38

标签: user-interface

我正在寻找任何人可能已经看到的有关如何有效呈现项目列表(总共约1500项)的任何示例,以便可以选择多个项目。

我见过几个类似的问题答案提示自动完成,它可以选择单个项目,但这并没有解决如何允许用户选择多个项目。

任何建议,或特别指向可能具有潜在解决方案的网络应用程序,都将非常受欢迎!

5 个答案:

答案 0 :(得分:3)

我正在考虑Google如何使用Gmail。

首先,您可以在每个项目旁边放置复选框,用户可以单独选择。然后放置一个过滤器/搜索框,可以选择/取消选择所有匹配(添加到/从中减去)。您还可以在文本框中实现自动完成功能。

其他过滤选项(按标签,按日期等)也很适合这种方法。这取决于您要列出的项目类型。

如果项目中存在一些常见的分组,您还可以将列表排列在一组子列表中。仍然使用复选框,但您可以将列表框彼此相邻排列(在用户选择要查看的父节点时,在右侧的下一个框中填充子项)。或者可以使用简单的树视图。

答案 1 :(得分:3)

自发布以来已经有一段时间了,但与此同时,一些非常好的多选“标签输入”或“药盒”风格选项已经可用:

https://harvesthq.github.io/chosen/

对于许多情况来说,这是一个很棒的解决方案 - 试试吧!

答案 2 :(得分:1)

我无法想到我使用的任何可用网络应用程序,它向我展示了我必须选择的1500件事。

我的建议是以某种方式打破列表(例如,作为一系列较小的选择,然后你可以允许多次打开)。你在问什么听起来像是一个可用性的噩梦。

答案 3 :(得分:1)

我会创建一个容器(DIV),通过在文本输入中键入文本来填充项目。文本输入基本上对所有可用项执行基本过滤。这些项目将作为可选元素显示在容器内,并且所选项目将被转移到单独的容器(以便能够执行多次搜索)。

答案 4 :(得分:1)

抱歉迟到了几年......我希望这至少可以帮助别人。

我要说使用Eric Hynds's multiselect或更大版本。好吧,也许这不是1500件物品的最佳界面,但也许它恰到好处。它有点像谷歌的处理,除了它几乎不支持键盘导航。

它修改了常规的SELECT MULTIPLE,HTML dropbox,带有一个可自定义和可点击的列表,您可以轻松过滤(当前) OR 组 - 此时,过滤和分组不会很好地合作。

如果需要,您可以使用此多选项和另一个显示所选内容的框。您甚至可以just tweak it (look at example #8)这样做。