web ui:如何为多选显示一个大列表

我在想谷歌是如何使用gmail的。

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

其他过滤选项(按标记、按日期等)也很适合这种方法。这取决于你想列出什么样的项目。

如果项目之间有一些通用分组,也可以将列表排列在一组子列表中。仍然有复选框,但您可以将列表框排列在一起(当用户选择要查看的父节点时,在右侧的下一个框中填充子节点)。或者一个简单的树视图。

这篇文章发表已经有一段时间了,但与此同时,一些非常好的多选“标签输入”或“Pillbox”样式的选项已经出现:

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

这是一个很好的解决方案,在很多情况下-试试看!

我想不出 可用的 我使用的网页应用程序显示了1500件我必须选择的东西。

我的建议是以某种方式将列表分解(例如,作为一个较小的选择序列,然后允许使用倍数)。你所问的听起来像是一个可用性噩梦。

我将创建一个容器(div),通过在文本输入中键入文本来填充条目。文本输入基本上对所有可用项执行基本筛选。这些项将作为可选元素显示在容器中,而选定项将被传输到单独的容器(以便能够执行多个搜索)。

抱歉迟到了几年…我希望这至少能帮上忙。

我说要么用 Eric Hynds's multiselect 或者更大的版本。好吧,也许这不是1500个项目的最佳界面,但也许它是正确的。它和谷歌的处理方式有点相似,只是它几乎不支持键盘导航。

它修改了常规的select multiple,html下拉框,有一个非常可定制和可点击的列表,您可以过滤(并且当前是这样的) 或 轻松地分组-此时,筛选和分组不能很好地协同工作。

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