您是否曾经遇到过需要接受一小段任意文本的表单？ 比如名字或其他。 这正是 <input type="text"> 的用途。 有 许多不同的输入类型（以及 模式！），选择合适的类型是一个好主意。
但这个小故事是关于其他事情，并且适用于任何类型。
如果文本需要是任意的（例如“您最喜欢的颜色是什么？”），这样人们可以输入任何东西，但您还想提供帮助。 也许有一些非常流行的答案。 如果人们可以简单地选择一个，岂不是很好？ 不是 <select>，而是输入和下拉菜单的混合体。 不过等等。 不要急着创建自己的自定义 React 元素。
这就是 <datalist> 的作用。 我前几天刚成功使用过它，所以我想写篇博文来记录一下，因为写博客很酷。
以下是基本知识
查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔
基本数据列表用法。
在 CodePen 上。
我正在处理的用例需要
- 一个用于用户名
<input type="text"> - 一个用于“标志”（表示权限的任意字符串）
<input type="text">
我可能不会为数据库中的每个用户名都使用 <datalist>。 我认为没有限制，但它位于您的 HTML 中，所以我建议最多 100 个选项或更少。
但对于第二个，我们当时可能只有 3-4 个独特的标志，所以对这些标志使用数据列表非常合理。 您可以输入任何您想要的内容，但这 UI 帮助您选择最常见的选项。 太方便了。 也许这对于像性别输入这样的东西很有用，您可以在其中选择一个选项列表，但它不会强制您实际选择其中一个选项。
即使比 <datalist> 存在的事实更不为人知的是：它适用于除了 text 之外的所有类型的输入，比如 date、range，甚至 color。
我不建议使用标签（在您的演示中为“天空的颜色”），直到 Mozilla 修复 Bug 869690。 Firefox 中的问题是，如果用户输入“b”，则没有对“blue”的建议，因为 Firefox 将用户输入与标签匹配，而不是与值匹配（当提供标签时）。
哇！ 捕捉到了。 该问题于 6 年前打开…… 并且尚未解决。
这段视频（来自该线程）既滑稽又痛苦…… https://bug869690.bmoattachments.org/attachment.cgi?id=9055574
一开始，我想知道我们是否可以假设标签始终可见，并默认包含它（与值匹配），然后也许使用实际的
<label></label>元素来添加上下文。 但快速测试的结果再次…… 出乎意料……奇怪的是，在这种情况下 FF 中的行为实际上更有意义，而 Chrome 中的结果简直是奇怪！
我喜欢数据列表 - 我甚至会将其用于像国家这样的更大的选择 - 但我不喜欢您无法对输入箭头或下拉菜单的外观进行任何样式化。 例如，也许我想要一个带有国家的数据列表，并且希望在下拉菜单中显示国家之前的国旗 - 这不可能做到。 这是一个巨大的且不必要的限制因素。
我不喜欢下拉菜单看起来与浏览器的“选择”下拉菜单完全不同。 我能够对该组件进行样式化以使其与我们的其他下拉菜单匹配，但菜单本身完全不同，并且显然无法进行样式化。 请查看 https://codepen.io/smlombardi/pen/XvpGrb?editors=1100#0
看起来 Safari 存在一个 bug，它同时显示数据列表和自动填充建议（这些是我通讯录中的联系人）。
真是个好发现！ 我非常激动，直到我发现它并不真正支持多个输入项，例如“red, green, blue”，除非是在电子邮件的情况下…… 真是很奇怪。
我发现了一个很酷的技巧，它是在苦苦挣扎了好几天后才想出来的。 事实证明，pattern 属性会过滤列表中可用的选项。 我正在使用一个数据列表为各种输入提供相同的选项，而 pattern 允许我控制在给定输入中显示哪些选项。
需要注意的是，输入模式区分大小写。 因此，pattern=”na” 将不允许出现。