原生HTML不支持多选搜索框，因其本质是搜索输入与多选状态管理的组合；input[type="search"]仅支持单值字符串，无法原生承载多选；可行方案是分离搜索框与多选筛选栏，或采用标签式交互模拟。
原生 HTML 没有“多选搜索框”这个标准组件，所谓支持多选的搜索框，本质是两个独立需求的组合：一个是搜索输入（input[type="search"]），另一个是多选状态管理（checkbox 或 select[multiple]）。强行把它们塞进一个输入框里，既破坏语义，又增加无障碍和移动端兼容风险。
为什么不能用 input[type="search"] 直接支持多选
input[type="search"] 是单值文本输入控件，它的设计目标就是接收一个字符串关键词。浏览器不会、也不能让它同时承载多个独立值——没有 multiple 属性，也没有 selectedOptions 接口。试图用 JS 在 value 里拼接逗号分隔字符串（如 "apple,banana"）会导致：
- 用户无法单独取消某一项，只能全删重输
- 后端收到的是字符串，不是数组，需额外解析且易出错（空格、逗号、引号等边界情况）
- 无法与键盘导航、屏幕阅读器配合（ARIA 无对应 role 支持）
- 移动端软键盘「搜索」键触发的是整个字符串提交，不是增量选择
真正可行的组合方案：搜索 + 多选筛选栏
把“搜索”和“多选”拆成两个协作但职责分明的区域。例如电商页的顶部搜索框 + 左侧品牌/分类多选栏。关键点在于表单结构统一、name 约定清晰、提交逻辑一致：
- 搜索框仍用
<form><input type="search" name="q"></form>，保证回车/软键盘行为正常 - 多选部分用一组
<input type="checkbox" name="brand">或<select multiple name="category">，各自有明确value - 所有字段必须包在同一个
<form>内，这样new FormData(form)才能一次性收集全部参数 - 提交时用
event.preventDefault()拦住跳转，再用fetch发送完整数据，URL 参数会自动合并为?q=phone&brand=apple&brand=samsung&category=smartphone
select[multiple] 在搜索场景下的致命短板
虽然 select[multiple] 原生支持多选，但它完全不适合当“搜索框”的一部分：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 中直接降级为单选弹窗，用户根本无法多选
- 桌面端默认渲染为多行列表（
size控制高度），视觉上不像搜索入口，容易被忽略 - 无法响应键盘输入过滤选项（原生
select不支持input事件），必须额外写 JS 模拟下拉+搜索建议 - 如果真要用它做筛选项，name 必须设为
name="filter[]"或后端配置支持数组解析，否则 Express/Flask 默认只取第一个值
需要动态多选关键词？改用标签式交互
如果业务强需求“在搜索框内添加/删除多个关键词标签”（如 Gmail 的收件人输入），那就放弃原生 input，用 <div contenteditable="false"> 模拟输入容器 + 动态插入 <span class="tag">xxx</span>。此时：
- 每个标签是一个独立 DOM 节点，带
data-value，可单独移除 - 真实
<input type="hidden" name="keywords">存储 JSON 字符串或逗号分隔值，供后端解析 - 焦点管理必须手动处理：
tabindex="0"、keydown监听Backspace删除末尾标签、Enter提交 - 无障碍要补
role="textbox"和aria-multiline="true"，并同步更新aria-describedby
这种方案复杂度高，仅在确实需要类邮箱收件人体验时采用；绝大多数搜索场景，老老实实用分离的搜索框 + 多选筛选栏更稳、更轻、更无障碍友好。
