blocks|key|2893125|text|我想不出我使用的任何可用的+web应用程序，它向我展示了1500种我必须选择的东西。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2893126|我的建议是以某种方式将列表分解(例如，作为一系列较小的选项，然后您可以允许多个选项)。你问的问题听起来像是可用性的噩梦。|2893127|entityMap^0|A|3|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|N|8|@]|D|@]|E|$]]]|I|$]]

I can't think of any usable web app I use that shows me 1500 things that I have to choose from.

My suggestion would be to break the list down somehow (for example, as a sequence of smaller choices, which you can then allow multiples on). What you're asking about sounds like a usability nightmare.

blocks|key|2063850|text|我将通过在文本输入中键入文本来创建一个填充了项的容器div。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2063851|文本输入对所有可用项执行基本过滤。|2063852|项将作为可选元素出现在容器内，并且所选项将被传输到单独的容器(以便能够执行多个搜索)。|2063853|entityMap^0|Q|3|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|K|$]]

I would create a container <code>div</code> populated with items by typing text in a text input. 
The text input performs a basic filter on all the available items. 
The items would appear inside the container as selectable elements, and selected items would be transferred to a separate container (as to be able to perform multiple searches).

blocks|key|157956|text|我在想一些类似谷歌如何用Gmail做到这一点的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|157957|首先，您可以在用户可以单独选择的每个项目旁边放置复选框。然后放置一个筛选器/搜索框，可以选择/取消选择所有匹配(添加到选择中/从选择中减去)。您还可以在textbox上实现自动完成。|157958|其他过滤选项(按标签、按日期等)也很适合这种方法。这取决于你想要列出的是什么类型的物品。|157959|如果项目之间有一些共同的分组，您还可以将列表排列在一组子列表中。仍然使用复选框，但您可以将列表框排列在一起(当用户选择要查看的父节点时，在右侧的下一个框中填充子节点)。或者一个简单的树视图也可以。|157960|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

I'm thinking something along the lines of how Google does it with Gmail.

First off, you can put checkboxes next to each item that the user can select individually. Then put a filter/search box, with the option to select/deselect all matching (add to/subtract from selection). You could also implement autocomplete on the textbox.

Other filtering options (by tag, by date, etc) lend themselves nicely to this method as well. It depends on what kind of items you're trying to list.

You could also arrange the list in a set of sub-lists, if there is some common grouping among the items. Still with the checkboxes, but you can arrange listboxes next to each other (populating children in the next box to the right as users select a parent node to view). Or a simple tree-view might do.

blocks|key|2069292|text|很抱歉来晚了几年...我希望这至少能帮助到一些人。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2069293|我会说要么使用Eric+Hynds's+multiselect，要么使用它的更大版本。好吧，也许对于1500个项目来说，这不是最好的界面，但也许它恰到好处。除了它几乎不支持键盘导航之外，它与google的处理方式有些相似。|offset|length|2069294|它修改了常规的选择倍数，HTML+dropbox，一个非常可定制和可点击的列表，你可以很容易地过滤(目前)或组-在这个时候，过滤器和分组不能很好地一起工作。|style|BOLD|2069295|如果需要，您可以使用此多选和另一个框来显示所选的所有内容。你甚至可以通过just+tweak+it+(look+at+example+#8)来做到这一点。|2069296|entityMap|0|LINK|mutability|MUTABLE|url|http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#filter|1|http://www.erichynds.com/examples/jquery-multiselect/examples.htm^0|0|7|O|0|0|1H|1|0|10|Y|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@$D|11|E|12|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|L|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]|T|$5|O|P|Q|A|$R|U]]]]

Sorry for being a couple years late... And I hope this helps someone at least.

I'd say either use <a href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/#filter" rel="nofollow noreferrer">Eric Hynds's multiselect</a> or a bigger version of it. Ok, maybe this is not the best interface for 1500 items, but maybe it's just right. And it's kind of similar to google's handling, except it has almost no support for keyboard navigation.

It modifies the regular SELECT MULTIPLE, the HTML dropbox, with a very customizable and clickable list which you can filter (and currently) OR group with ease - at this time, filter and grouping don't work together quite well.

If needed, you could use this multiselect and another box showing everything that was selected. You can even <a href="http://www.erichynds.com/examples/jquery-multiselect/examples.htm" rel="nofollow noreferrer">just tweak it (look at example #8)</a> to do it so.

blocks|key|5008653|text|自从这篇文章发布以来已经有一段时间了，但在此期间，一些非常好的多选"tag+input“或"pillbox”样式选项已经出现：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5008654|https://harvesthq.github.io/chosen/|offset|length|5008655|对于许多情况来说，这是一个很棒的解决方案--试试吧！|5008656|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|Z|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

It's been a while since this was posted, but in the meantime some very good multi-select "tag input" or "pillbox" style options have become available: 

<a href="https://harvesthq.github.io/chosen/" rel="nofollow">https://harvesthq.github.io/chosen/</a>

This is a fantastic solution for many situations - try it out!

I'm looking for any examples anyone might have seen of how to effectively present a list of items (about 1500 in total) so that multiple items can be selected.

I've seen a couple of similar questions where the answer suggests an auto-complete, which works to select a single item, but that doesn't allow users to select multiple items.

Any suggestions, or especially pointers to web apps that might have a potential solution, would be most appreciated!

web ui: How to present a large list for multi-select

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在寻找任何人可能见过的任何例子，如何有效地呈现项目列表(总共约1500个)，以便可以选择多个项目。我见过几个类似的问题，答案建议使用自动补全，它可以选择单个项目，但不允许用户选择多个项目。任何建议，或者特别是指向可能有潜在解决方案的web应用程序的指针，都将不胜感激！

问web ui:如何显示多选的大列表
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问web ui:如何显示多选的大列表EN