用法是 input 的 list 属性指向某个 datalist 的 id，该 datalist 里放一组 option。用户聚焦输入时浏览器展示全部候选项，打字后自动筛选匹配项，选中即填入输入框。与 select 不同的是用户仍可自由输入任意值——这正是自动补全而非单选的场景。
典型用途：搜索框历史词、国家/城市选择、邮箱域名补全。JS 侧也能动态增删 option 达到异步联想效果，不过复杂需求一般还是用自定义浮层组件。注意不同浏览器渲染样式不统一，Safari 早期版本支持较弱，移动端体验需要验证。
<style> .fld { width: 280px; padding: 10px; border: 1px solid #4a9eff; border-radius: 8px; } </style> <div> <input class="fld" list="cities" placeholder="输入或选择一个城市"> <datalist id="cities"> <option value="北京">首都</option> <option value="上海">直辖市</option> <option value="深圳">广东省</option> <option value="杭州">浙江省</option> <option value="成都">四川省</option> </datalist> </div>