<datalist> 的 <option> 不支持多列显示，仅能通过 value 提交值、label 辅助显示（非标准且兼容性差），如需真正多列交互效果，必须用 JavaScript 自建组件。
datelist 的 <option> 本身不支持多列显示
<datalist> 是纯输入建议容器，它的每个 <option> 只能有一个 value 属性（用于提交/取值）和一个文本节点（用于显示）。浏览器原生下无法让单个 <option> 渲染成“姓名 | 部门 | 工号”这样的多列效果——它始终以单行纯文本呈现，且无样式控制权。
想实现“多列信息提示”，得绕过 <option> 的限制
常见做法是用 value 存唯一标识（如 ID），再把完整信息拼进 label 属性里，靠空格、竖线或制表符分隔。虽然视觉上像多列，但本质仍是单字符串：
<input list="users"> <datalist id="users"> <option value="1001" label="张三 | 技术部 | 2023-001"> <option value="1002" label="李四 | 产品部 | 2023-002"> </datalist>
-
label不影响表单提交值，value才是最终提交/获取的值 - 部分浏览器（如 Chrome）会在下拉中显示
label内容，但排版不可控，对齐、换行、宽度均无法干预 - Firefox 默认只显示
label文本，不显示value；Chrome 则常在右侧灰字弱化显示value（非标准行为，不可依赖）
真要多列+可交互，必须放弃原生 <datalist>
原生 <datalist> 的设计目标就是轻量级建议，不是下拉选择器。一旦需要列对齐、hover 高亮、键盘导航、搜索高亮关键词等，就得用 JavaScript 自建组件：
- 用
<div>+<ul>模拟下拉面板，每项用<li>包含多个<span class="col"> - 监听
input事件做模糊匹配，动态渲染匹配项 - 绑定
keydown处理上下键和回车选中，更新<input>的value和隐藏字段（如<input type="hidden" name="user_id">） - 注意无障碍：需加
role="listbox"、aria-expanded、aria-activedescendant等属性
兼容性和维护成本容易被低估
很多人试了 label 拼接就以为搞定，结果上线后发现：IE 完全不支持 label，Safari 对空格分隔识别不稳定，用户复制粘贴时带入多余符号，后台解析 value 和展示文本逻辑耦合变紧……真正要稳定支撑业务，自定义下拉的开发量远小于后期修 bug 的时间。
立即学习“前端免费学习笔记（深入）”；
