如何用 datalist 做输入建议？和 select 有什么区别

datalist 是给普通输入框加“输入建议”的 HTML 原生方案：用户能看到候选列表，但仍然可以自由输入任意内容；select 是封闭枚举，用户只能在给定选项里挑一个，不能填新值。结论一句话：需要“提示但不限制”就用 datalist，需要“只能从这些值里选”就用 select。

datalist 怎么用？三行 HTML 就能跑

datalist 本身不显示、不提交，它只是一份“候选值清单”，通过 input 的 list 属性挂上去。

<label for="city">城市</label>
<input id="city" name="city" list="city-list" autocomplete="off">
<datalist id="city-list">
  <option value="北京"></option>
  <option value="上海"></option>
  <option value="广州"></option>
</datalist>

关键点有三个：一是 <datalist> 的 id 必须和 input 的 list 值完全一致；二是提交到后端的是 input 的 name/value，datalist 里的 option 不参与表单序列化；三是建议值随输入实时过滤，输入“北”就只剩“北京”。加上 autocomplete="off" 可以避免浏览器历史记录和 datalist 建议叠在一起，出现两套下拉。

datalist 和 select 到底有什么区别？

结论：两者的核心差异是“是否允许用户输入新值”，其余差异都是这条派生出来的。

“样式不可控”是最实际的差别：datalist 弹出的候选框属于浏览器原生 UI，option 写 background-color、padding 基本无效，各浏览器外观不一致，想统一视觉只能换成自绘的下拉组件（如带 role="combobox" 的输入框）。

兼容性和实际使用中有哪些坑？

结论：datalist 现在能用，但 Safari 的支持来得非常晚，历史包袱明显。

• Safari 直到 12.1 版本（2019 年 3 月） 才开始支持 datalist，此前完全不显示建议；Chrome 从 20 版、Firefox 从 4 版就已经支持。如果你的用户里有老版本 iOS/macOS Safari，必须有降级方案。
• 移动端表现不同：iOS Safari 把建议渲染在软键盘上方的建议条里，而不是下拉框；Android Chrome 和桌面端一致。
• 同一个 datalist 在不同浏览器里显示的文案可能不一样：Chrome 会同时显示 value 和标签文本，部分浏览器只显示 value。所以别把关键信息只放在 label 里。
• 无法用 JS 主动展开建议列表。想让“点一下按钮就弹出全部候选”，datalist 做不到，只能自绘。
• 没有“已选中项”概念，也没有 change 之外的选中事件；input 事件才是监听输入的主入口。

动态更新候选值要怎么写？

结论：改完 <datalist> 里的 option 后，部分 Chromium 内核版本不会刷新已展示过的建议，需要“摘掉再挂回”来强制重算。

const input = document.querySelector('#city');
const list  = document.querySelector('#city-list');

function setOptions(values) {
  input.removeAttribute('list');          // 摘掉关联，触发重新计算
  list.innerHTML = values
    .map(v => `<option value="${v}"></option>`)
    .join('');
  input.setAttribute('list', 'city-list'); // 重新挂上
}

取值时记住：读用户输入用 input.value，读全部候选要用 list.options，两者不是一回事。

该选哪一个？

结论按场景分：省份、性别、支付方式这类固定且互斥的选项，用 select（配 required 还能顺手做校验）；城市、行业、标签、搜索关键词这类列表很长且用户可能想填新词的，用 datalist。如果一个字段既要建议又绝对不能出现列表外的值，别硬用 datalist，改用“input + 提交时后端/前端校验”，或者直接上自绘 combobox。选型只需问一句：用户填了列表外的值，业务能不能接受？能接受就 datalist，不能接受就 select 或自绘组件。