不能。html datalist 元素原生不支持 optgroup，浏览器会忽略其子元素，所有主流浏览器行为一致；需用 input + div 自定义下拉并手动实现分组渲染与 aria 语义支持。
HTML datalist 本身不支持 optgroup 分组
直接回答：不能。原生 datalist 元素只接受子元素 option，浏览器会忽略任何嵌套的 optgroup —— 即使你写进去，也完全不渲染分组标题，且控制台通常不会报错，容易误以为“写了就生效”。
这是 HTML 规范限制，不是浏览器兼容问题。所有主流浏览器（Chrome/Firefox/Safari/Edge）行为一致。
用 input + div 模拟分组的最小可行方案
核心思路是放弃 datalist，改用 input 配合自定义下拉面板（div + ul），手动实现带 optgroup 样式的列表。关键点在于：
- 监听
input的input事件，实时过滤数据 - 按分类字段（如
category）组织选项数组，渲染时插入带 class 的分组标题li - 用 CSS 控制
li.group-title的样式（如font-weight: bold; color: #666;）和禁用点击 - 选中时用
input.value = option.value，并收起面板
示例片段（仅结构逻辑）：
<input id="search" placeholder="输入试试"><div id="suggestions" class="dropdown"></div>
<script>
const options = [
{ value: "apple", label: "苹果", category: "水果" },
{ value: "banana", label: "香蕉", category: "水果" },
{ value: "carrot", label: "胡萝卜", category: "蔬菜" }
];
// 按 category 分组后渲染到 #suggestions
</script>
为什么不用第三方库反而更可控
像 select2 或 choices.js 确实支持分组，但它们会接管整个 DOM 结构、绑定大量事件、注入 CSS，并可能与现有表单校验或框架（如 React/Vue）产生冲突。
如果你只需要轻量级搜索 + 分组展示，手写 50 行 JS 更安全：
- 无依赖，不污染全局变量
- 可精确控制键盘导航（
↑/↓/Enter）行为 - 分组逻辑完全由你定义（比如按首字母、按状态字段、甚至动态服务端分组）
- 避免因库版本升级导致分组样式突然失效
容易被忽略的焦点与可访问性细节
模拟下拉最常漏掉的是焦点管理与 ARIA 属性，这会导致屏幕阅读器无法识别分组结构或键盘用户无法操作：
- 给下拉容器加
role="listbox"，每个选项加role="option"，分组标题加role="group"和aria-label - 用
input的aria-autocomplete="list"和aria-controls="suggestions"建立关联 - 键盘打开/关闭下拉必须响应
Escape和Tab；选中后要主动input.focus() - 分组标题不能获得焦点（
tabindex="-1"），但需保留在语义流中供读屏器朗读
这些不是“锦上添花”，而是让分组真正可用的前提。没加 ARIA 的分组，对很多用户来说就是不可见的。
