使用 Datalist 无需 JavaScript 即可实现基本自动完成

本文最初发表于 Rails Designer

---

我最近不得不添加一个基本的自动完成功能。用户可以使用任何键和任何值添加设置。但他们也可以创建可供选择的预定义设置。

上面的 gif 已经很好地解释了这一点。他们可以在字段中输入任何值，但他们选择预定义的 slug 键。

当你看到这个时，你可能会选择一个 JavaScript 库，比如古老的 selectize.js 或更新的、更轻量级的 tom-select（还有更多！）。虽然这些肯定有其用例，但在这种情况下，我认为我可以使用更简单的东西（至少在该产品所处的早期阶段）。

输入：数据列表。正如您从链接中看到的，支持非常好！

设置起来也超级简单。只是一些 HTML。让我们看看上面的示例是如何完成的：

<form action="#" method="post">
  <input list="settings" type="text">

  <datalist id="settings">
    <option value="slug"></option>
    <option value="description"></option>
    <option value="author"></option>
  </datalist>
</form>

就是这样。在要添加“自动完成”的输入字段中，添加一个与 datalist 元素的 id 匹配的列表属性。然后在数据列表中添加您希望自动完成显示的选项。

然后，你就完成了！ ？

优点和缺点

现在您已经知道如何使用 datalist，了解其优缺点很重要，这样您就可以确定是否可以并且想要使用它。

优点

• 最少的代码
• 本机浏览器集成和默认键盘导航
• 内置表单验证和辅助功能

缺点

• 大型数据集的性能问题（可以通过基本的 JS 异步请求修复）
• 跨平台行为不一致
• 没有样式选项

这是 HTML 功能之一，如果使用正确，可以帮助您更快地发货。如果您需要更多样式或在某个时候需要大量元素，您可以随时选择自定义解决方案。

以上是使用 Datalist 无需 JavaScript 即可实现基本自动完成的详细内容。更多信息请关注PHP中文网其他相关文章！