多选下拉框怎么设计？搜索、全选与已选回显

多选下拉框要让用户随时回答三个问题：当前选了什么、还能选什么、怎样恢复默认。先确定结果回显方式，再安排搜索与全选；如果团队需要把筛选流程做成可点击原型，可在界面设计协作工具中把所有状态连起来。

先决定结果如何回显

选项少时，可以在下拉面板中保留复选框和已选标记；选项多时，输入框下方应显示已选数量或可删除标签。不要只在关闭面板后用一串逗号拼接结果，用户回到筛选条件时仍需要知道每个选项是否生效。

搜索不应破坏已选项

输入关键词只过滤当前可见选项，不能偷偷取消已经选择的项。搜索结果为空时保留已选摘要，并提供清空搜索的动作。异步搜索要有加载状态；如果服务返回失败，不要把旧结果当成新的匹配结果。

全选、反选和批量范围要说清楚

“全选”可能代表当前搜索结果，也可能代表整个数据集。按钮旁用范围文字说明，例如“全选当前 24 项”，并在跨页选择时提供“已选择全部 120 项”的确认。取消全选也应只影响同一范围，避免用户误删另一组条件。

标签溢出和移动端输入

标签超过一行时保留数量摘要，点击后再展开完整清单；标签删除后焦点应回到相邻标签或输入框。移动端面板可以改为底部抽屉，但底部的完成、清空和取消不能随列表滚走。

键盘和读屏状态

键盘焦点要区分输入框、选项和全选操作；按空格切换选项，按 Esc 关闭面板而不清空已选。选中状态通过可读文本同步，不只依靠颜色和勾选图标。

在原型中连接未选择、搜索、部分选择、全选和提交后的筛选结果，逐一检查“已选”是否能回到真实列表。

把状态写成可验收规则

多选组件至少要区分“未打开、已打开但未选择、部分选择、全选、搜索无结果、请求失败、已提交”七种状态。每种状态都记录输入框文字、面板内容、已选摘要和主按钮文案。这样开发可以逐项核对，而不是只按一张静态图猜交互。

全选当前结果后，用户删除一个标签，顶部状态应变成部分选择而不是仍显示全选。清空搜索词后，面板回到完整选项，但已选项不能丢失。异步分页时可以把“已选 8 项”固定在面板顶部，避免翻页后用户忘记之前的选择。

一个筛选案例

以“项目成员”筛选为例：输入“设计”后出现设计师和设计负责人，用户先全选当前结果，再移除一位负责人，最后继续搜索“研发”。结果摘要应显示已选 3 人，而不是只显示当前搜索结果。提交后列表标题可以写“项目成员（3）”，让筛选条件在页面上可回看。

交付前检查

• 搜索词改变时，已选项是否仍可删除和回看？
• 全选按钮是否说明作用范围，跨页选择是否给出数量？
• 清空、取消和完成三个动作是否不会互相误触？
• 键盘、触屏和读屏操作是否能完成相同选择？

数据量和异步场景

数据量超过一页时，面板可以使用分页或滚动加载，但已选值要在任何分页中可见。用户搜索一个已选项后，复选框仍应处于选中状态；清空搜索词后，列表不应突然把选中项排到不可见位置。对不存在的旧值，可以显示“已失效”并提供移除，而不是静默删除。

标签文本很长时，优先展示数量和关键标签，完整清单在聚焦或点击后出现。接口返回慢时，全选按钮要禁用并说明正在加载，不要让用户误以为已经选择全部。提交后若服务拒绝某个选项，保留其他合法选项，并把拒绝原因归属到具体选项。

设计评审时让一个人只用键盘完成筛选，再让另一人用窄屏触屏完成同一路径。两次操作都能看到已选数量、清空和提交结果，才说明组件不依赖某一种输入方式。

组件标注与数据规则

标注中写明选项的唯一值、展示文本、禁用原因和排序规则。已选标签应根据唯一值回显，不能用展示文本匹配，否则同名成员会被误选。数据更新后，如果选项从列表消失，要决定是保留失效值并提示，还是要求用户移除。

全选的作用域是当前搜索结果、当前页还是整个数据集，需要放在按钮附近。远程搜索要处理防抖、加载和失败，避免用户连续输入时旧结果覆盖新结果。设计稿把这些状态放进组件变体，开发不会只实现默认态。

验收时记录每一次操作后的已选数量和提交参数，检查列表结果是否真的按条件更新。这样可以把视觉问题和数据逻辑问题区分开。

把筛选结果交给用户复核

提交前可以在面板底部显示“已选 8 项”，但不要只给数字。数量较少时展示关键标签，数量较多时允许打开完整摘要。筛选结果页也可在标题旁显示条件，让用户离开下拉面板后仍知道列表为何变化。

用户删除一个已选标签后，面板保持打开并把焦点放到下一个标签或输入框。点击外部关闭面板不等于取消本次选择，只有明确的取消按钮才恢复打开前的结果；具体规则应与产品的筛选提交方式一致。

当筛选条件需要分享时，生成的链接应包含稳定的唯一值而非展示文本。选项名称变化后，旧链接仍能解释或提示条件失效，不能 silently 变成空筛选。

交付时说明取舍

如果组件用于报告筛选，优先让用户快速回看条件；如果用于权限分配，优先显示范围和失效项。两类场景都使用多选下拉，但结果摘要、全选范围和错误处理不同。将业务场景写在组件说明中，避免后续页面直接复制默认状态。

最终交付文件保留组件变体、键盘路径和一组真实数据示例，开发可以从变体推导状态，测试可以逐项复核结果。

筛选条件如何回放

把一次多选操作记录成可回放步骤：打开、搜索、全选当前结果、删除一项、清空搜索、提交。回放时对照已选摘要和提交参数，才能发现视觉上看不出的跨页、失效值和异步覆盖问题。