datalist 仅提供静态选项池，不自动过滤，需 JavaScript 监听 input 事件动态更新 options；与 select 的本质区别在于：datalist 必须绑定 input，支持手动输入和选择，而 select 强制选择且为独立控件。
用 datalist 实现搜索框的下拉建议，但别指望它自动过滤
datalist 本身不处理输入匹配逻辑，它只是个“选项池”。浏览器只在用户点击输入框右侧小箭头或按 Alt+↓ 时展示全部 option，不会根据已输文字动态筛选。想实现“输入‘北京’就只出‘北京市’‘北京西站’”，必须配合 JavaScript 监听 input 事件手动控制 options 的显隐或内容。
datalist 和 select 的根本区别在哪
两者都提供预设值，但行为完全不同：
-
select是独立控件，用户必须从列表中选，不能自由输入 -
datalist必须绑定到一个input（靠list属性关联），用户既能手动输入任意内容，也能从建议中选择——选中后会自动填入 input 值 -
datalist的option不支持disabled或分组（optgroup），语义能力比select弱
基础写法：确保 id 和 list 属性严格匹配
这是最常出错的地方。以下写法是有效的：
<input type="text" list="cityList"> <datalist id="cityList"> <option value="北京市"> <option value="上海市"> <option value="广州市"> </datalist>
注意点：
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
-
list属性值（如"cityList"）必须和datalist的id完全一致，包括大小写和空格 -
option只能有value属性，不要写text或内联文本——浏览器只读value - Chrome / Edge 支持较好；Firefox 会显示所有项但不响应键盘上下键；Safari 对
input[type="search"]绑定datalist有兼容问题
动态建议要自己写 JS，别依赖 datalist 自动过滤
如果你希望输入“sh”就只显示“上海”“深圳”，就得监听 input 事件，清空并重写 datalist 内的 option：
const input = document.querySelector('input[list]');
const datalist = document.querySelector(`#${input.list}`);
const allOptions = ["北京市", "上海市", "深圳市", "广州市"];
input.addEventListener('input', () => {
const query = input.value.trim();
datalist.innerHTML = '';
if (!query) return;
allOptions
.filter(opt => opt.includes(query))
.forEach(val => {
const opt = document.createElement('option');
opt.value = val;
datalist.appendChild(opt);
});
});
关键提醒：
- 直接操作
datalist.innerHTML是最简方式，但频繁重写可能影响性能（选项超百条时需节流） - 不要用
display: none隐藏option——option不支持该样式，隐藏无效 - 移动端 Safari 不触发
datalist下拉，此时建议降级为纯div模拟下拉菜单
真正麻烦的不是写法，而是不同浏览器对 datalist 的渲染时机和交互反馈差异太大——做正式产品时，多数团队最终会弃用原生 datalist，改用 autocomplete 库或自研下拉组件。
