HTML Datalist

引言

所有网页用户可能都熟悉自动完成一词。在搜索某个项目时，搜索项应会建议它。同样，当我们输入电子邮件地址时，邮件会提供收件人列表。此功能在没有 JavaScript 的帮助下在 Web 浏览器中无法正常工作。但是，借助 HTML 5 中一项新功能，无需 JavaScript 支持即可实现。在本文中，我们将学习数据列表以及在不同场景中使用数据列表。我们还将研究其局限性。

创建数据列表

要了解数据列表的工作原理，让我们逐步进行代码片段分析

用户在上述片段中提供他们喜欢的球员的球队名称。用户没有提供额外的帮助来自动完成球队名称。但是，借助数据列表，我们可以提供选项列表，以便用户可以选择合适的选项。让我们通过数据列表提供建议。

在此之后，如果用户输入精确匹配，浏览器将建议该选项。让我们通过完成代码来理解这一点。

示例 1

输出

说明

在上面的代码中，我们提供了一些数据列表。当用户尝试输入内容时，如果存在精确匹配，浏览器将从选项中建议它。

此外，所有选项元素都有一个 value 属性。当用户不知道哪个值与给定的选项值相关联时，这很有帮助。让我们考虑以下代码。

示例 2

输出

说明

在上面的代码中，我们提供了一些数据列表。当用户尝试输入州名时，如果存在精确匹配，浏览器将从州名中建议它。

自动完成属性

如果我们看到示例一和示例二的输出，我们会发现结果看起来相似。所有浏览器都有不同的机制来存储选项。这些选项稍后用于自动完成。在下面的示例中，我们将为浏览器启用自动完成功能。

示例 3

输出

因此，让我们来理解 data list 和 autocomplete 属性之间的区别。在使用 autocomplete 属性后，浏览器会根据用户的先前输入提供选项。此外，它还会存储用户响应以供将来使用。但是，借助 datalist，浏览器会建议用户的选项。

让我们举一个例子，我们将 autocomplete 选项设置为 off，看看它的输出。

示例 4

输出

其他输入类型

我们只能将 autocomplete 属性用于文本输入。但是，在 HTML5 出现后，我们可以为数据列表提供各种输入类型。如果我们将输入类型设置为 range，它将为用户输入创建一个滑块。如果我们将它与数据列表结合起来，我们也可以建议范围内的点。让我们通过一个例子来看看。

示例 5

输出

说明

在上面的代码中，我们创建了一个滑块，用户可以通过滑动条输入捐赠金额。

何时使用数据列表

当我们希望浏览器向用户提供输入建议时，此时可以使用数据列表。假设我们想创建一个选项，用户可以从数据列表中的选项中选择他们的国家。让我们通过示例看看如何在数据列表中实现国家。

示例 6

输出

强制执行值

上面的示例表明，datalist 无法强制员工选择必填选项。但是，我们可以通过提供以下 API 来实现这一点。让我们通过一个例子来看看。

输出

No output

回退到备用 HTML 内容

一些浏览器不支持数据列表。但是，我们仍然可以在不支持的浏览器上显示所有子选项。借助下面的代码，我们可以在浏览器上显示不支持的数据。让我们看看代码。

示例 7

输出

说明

在上面的代码中，如果用户找不到合适的选项，他们可以手动选择另一个选项并输入他们的详细信息。

数据列表的局限性

数据列表具有各种功能。但它有一些局限性。它们如下：

• 我们无法使用 CSS 样式属性更改数据列表的显示。
• 同样，我们也无法更改列表的位置。
• 在浏览器显示结果之前，我们也无法计算字符的类型。
• 我们也无法控制什么被认为是匹配（区分大小写、字符串开头匹配还是任意位置匹配等）。
• 我们无法将输入与服务器端数据源关联。