什么是datalist？
<datalist> 是 HTML5 中的一个新标签，用于指定输入框中可供选择的预定义选项列表。它可以在用户输入时自动完成或提供可选选择，类似于下拉框或自动补全文本框，但更灵活和易于使用。
当用户在输入框中输入字符时，浏览器将显示匹配该字符的选项列表。此外，用户还可以在输入框中使用上下箭头键来选择下拉列表中的选项。如果没有找到匹配项，则可以继续输入以添加新选项。
要使用<datalist>，我们将其添加到HTML文档中，并通过id属性为其指定一个唯一的标识符。然后，在相关的<input>元素中，我们将list属性设置为该标识符。
例如，以下是一个基本的HTML表单，其中包含一个文本输入框和一个用于显示可选值的datalist：
<label for="fruit">Select a fruit:</label>
<input type="text" id="fruit" name="fruit" list="fruits">
<datalist id="fruits">
<option value="Apple">
<option value="Banana">
<option value="Cherry">
<option value="Date">
<option value="Elderberry">
</datalist>
在上面的示例中，用户输入fruit后，将显示一个下拉菜单，其中包含可选的水果列表。如果用户选择了一个选项，则该选项的值将自动填充到输入框中。
<datalist>提供了一种简单的方法，用于在Web应用程序中实现自动补全或下拉框功能。与传统的下拉框不同，<datalist>不会占用太多的页面空间，而且可以更灵活地在用户输入时进行选择。此外，对于许多使用情况，datalist还可以提高数据输入速度和准确性。
尽管<datalist>标签新近出现，并不是每个浏览器都支持它，但随着时间的推移，越来越多的现代浏览器开始支持它。因此，在设计Web应用程序时，您可以考虑使用<datalist>标签来增强用户输入体验。
