HTML Academy · 课时

用于自动完成的 datalist

Q: 「用于自动完成的 datalist」这节课中我会学到什么？

使用 datalist 元素建议输入值 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 datalist 元素建议输入值

用于自动完成的 datalist 是 CoddyKit 上的免费 HTML Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。

什么是 datalist？

<datalist> 元素为 <input> 提供预定义的建议列表：

<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->

datalist 与 select

<datalist> 与 <select> 的主要区别：

datalist — 自由文本 + 建议（用户可以输入任意内容）
select — 受限选择（用户必须从列表中选择）

如果您想提供值建议但不限制输入，请使用 datalist。

将 datalist 与 input 关联

<input> 上的 list 属性必须与 <datalist> 的 id 相匹配：

<input type="text" list="fruits" name="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Cherry">
</datalist>

datalist 与不同的输入类型

<datalist> 可与多种输入类型配合使用：

<!-- text + datalist: type-ahead suggestions -->
<input type="text" list="countries">

<!-- range + datalist: tick marks -->
<input type="range" min="0" max="100" step="10" list="marks">
<datalist id="marks">
  <option value="0">  <option value="25">
  <option value="50"> <option value="75"> <option value="100">
</datalist>

<!-- color + datalist: color palette shortcuts -->
<input type="color" list="brand-colors">
<datalist id="brand-colors">
  <option value="#0070f3">
  <option value="#e86f00">
</datalist>

datalist 中的 option label

datalist 中的选项可以有可见标签和提交值：

<datalist id="countries">
  <option value="US">United States</option>
  <option value="GB">United Kingdom</option>
  <option value="DE">Germany</option>
</datalist>
<!-- In some browsers, label shows in dropdown
     value is submitted when the option is selected -->

筛选建议

浏览器会在用户输入时筛选建议：

匹配算法因浏览器而异
有些浏览器从开头进行匹配，另一些则可以匹配字符串中的任意位置
您无法控制浏览器的筛选行为
如需自定义筛选，请使用 ARIA 构建自定义自动完成组件

使用 JavaScript 动态更新 datalist

动态更新 datalist 选项：

<input type="text" list="suggestions" id="search-input">
<datalist id="suggestions"></datalist>

<script>
document.getElementById('search-input').addEventListener('input', async function() {
  const query = this.value;
  const res = await fetch(`/api/search?q=${query}`);
  const items = await res.json();

  const dl = document.getElementById('suggestions');
  dl.innerHTML = items.map(item =>
    `<option value="${item.name}">`
  ).join('');
});
</script>

datalist 可访问性

datalist 的可访问性注意事项：

屏幕阅读器会将建议作为列表框进行播报
用户可以使用方向键浏览建议
输入框仍接受自由文本 — 请确保验证逻辑能够处理这种情况

浏览器支持注意事项

datalist 的浏览器支持情况良好，但存在一些差异：

Chrome、Edge、Firefox：完整支持
Safari：Safari 12.1 及更高版本支持
移动浏览器：大多数会显示建议，但界面各不相同
依赖 datalist 之前，请务必在目标浏览器上进行测试

不应使用 datalist 的情况

以下情况不适合使用 datalist：

需要严格验证（用户必须从列表中选择）
需要自定义选项样式（外观完全由浏览器控制）
需要分组（datalist 不支持 optgroup）

在这些情况下，请使用带有 ARIA role="combobox" 的自定义自动完成组件。

datalist 与搜索输入框

比较带自动完成的 datalist 与搜索输入框：

<input type="search" name="q" list="search-suggestions">
<datalist id="search-suggestions">
  <option value="HTML tutorial">
  <option value="HTML forms">
  <option value="HTML accessibility">
</datalist>
<!-- type="search" provides search-specific UI on mobile -->
<!-- list attribute adds datalist suggestions to any input type -->

快速检查

如何将 input 与其 datalist 元素关联？

回顾：datalist

Datalist 要点：

<datalist id> + <input list> — 通过匹配 id/list 进行关联
用户可以自由输入或选择建议
当选项必须受限时，请使用 <select>
可与文本、范围、颜色和其他输入类型配合使用
建议会随着用户输入而筛选

常见问题解答

「用于自动完成的 datalist」课时是免费的吗？

是的 — 「用于自动完成的 datalist」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「用于自动完成的 datalist」这节课中我会学到什么？

使用 datalist 元素建议输入值你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「用于自动完成的 datalist」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML Academy 课中编写并运行代码吗？

能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 HTML Academy