datalist是H5原生支持输入联想的轻量方案，通过input的list属性绑定id为cityList的datalist，内部option提供候选词，浏览器自动前缀匹配并下拉展示。
在 H5 中，datalist 是原生支持输入联想（自动补全）的轻量方案，无需 JS 就能实现基础推荐，配合 input 的 list 属性即可生效。
基本用法：绑定 datalist 到 input
关键在于给 input 设置 list 属性，其值等于 datalist 的 id；datalist 内部用多个 option 提供候选词：
<input type="text" list="cityList" placeholder="输入城市名...">
<datalist id="cityList">
<option value="北京">
<option value="上海">
<option value="广州">
<option value="深圳">
</datalist>
用户输入时，浏览器会自动匹配已输入内容开头的 option 值并下拉展示。注意：匹配是前缀式（starts-with），且不区分大小写。
增强体验：支持 label 描述 + 部分匹配优化
option 可添加 label 属性，用于显示说明文字（如分类、拼音等），但提交/选中时仍以 value 为准：
<option value="杭州" label="Zhejiang">
<option value="哈尔滨" label="Heilongjiang">
若需更灵活的匹配（如包含、拼音首字母），datalist 本身不支持，必须配合 JS 监听 input 事件动态更新 option 列表 —— 此时 datalist 仅作渲染容器，数据由 JS 控制。
兼容性与注意事项
- 所有现代浏览器（Chrome、Firefox、Edge、Safari 15.4+）均支持，iOS Safari 15.4 起支持
-
不触发 submit 或 change 事件：选中
datalist项只是填充 input 值，需监听input或change获取最终值 - 无法自定义样式：下拉菜单外观由浏览器控制，不能用 CSS 修改弹出层
- 移动端部分浏览器（尤其旧版 Android WebView）可能不显示或行为异常，建议降级为纯文本提示
简单 JS 动态更新示例（可选进阶）
当数据量大或需实时搜索时，可 JS 清空并重写 datalist 内容：
const input = document.querySelector('input[list]');
const list = document.getElementById(input.list.id);
input.addEventListener('input', () => {
list.innerHTML = '';
['南京', '宁波', '南昌'].filter(city => city.includes(input.value)).forEach(city => {
const opt = document.createElement('option');
opt.value = city;
list.appendChild(opt);
});
});
注意：动态更新后，浏览器会自动刷新下拉选项，无需手动触发。
