创建自动完成数据列表控件

如果您一生中看到的网站数量不错，那么您肯定会注意到其中大多数重复出现的小部件。 这些小部件中包括搜索框，新闻稿小部件和文本框自动完成小部件。 后者是一个广泛使用的组件，尤其是在网站需要具有多个可能值但又需要允许创建一个全新值的字段时。 采用此组件的方式使得许多JavaScript框架都有自己的自动填充小部件。

直到几年前，还没有原生的HTML元素来处理这种情况，开发人员已经以不同的方式实现了这一概念。 不再缺少这个HTML难题。 今天，我们有一个名为datalist的HTML元素datalist此目的。 在本文中，我们将发现它是什么以及如何使用它。

datalist元素是什么？

datalist元素 表示一组选项元素，这些元素包含其他控件的预定义选项。 因此，该元素可以看作是一组option的包装，这些option表示input可以假定的可能值，而不仅限于这些值。 默认情况下， datalist及其子级是隐藏的，因此您不会在网页中看到它们。 事实上， datalist必须通过使用来链接到另一个元素list上的这些其他元素的属性集。 此属性的值必须设置为要使用的datalist的ID。

使用此元素的HTML代码的简单示例如下所示：

<input name="city" list="cities" />
<datalist id="cities">
   <option value="Naples" />
   <option value="London" />
   <option value="Berlin" />
   <option value="New York" />
   <option value="Frattamaggiore" />
</datalist>

上面的代码定义了一个input和一个datalist元素，其中包含几个option 。 如您所见， datalist list ID为“ cities”，并且input通过使用list属性（也具有“ cities”作为其值）链接到它。

该代码的实时演示如下所示， 可以作为JSFiddle使用 。

由于其性质，此元素很适合与JavaScript结合使用。 例如，您可以对服务器执行Ajax请求，以根据用户的输入检索相关值。

一个例子示于下面的演示， 可作为一个的jsfiddle ，其中所述option S的datalist是动态生成的。

到目前为止，我们已经讨论了如何自动完成文本字段，但这并不是我们可以使用此HTML元素的唯一情况。

datalist和<input type="color">

前面的示例很好，但是您可以使用datalist进行更多操作。 如果您想通过使用<input type="color">向用户建议颜色，该怎么办？ 在这种情况下，您可以编写以下代码：

<input type="color" list="colors" />
<datalist id="colors">
   <option value="#00000"/>
   <option value="#478912"/>
   <option value="#FFFFFF" />
   <option value="#33FF99" />
   <option value="#5AC6D9" />
   <option value="#573905" />
</datalist>

目前只有Chrome 37和Opera 24很好地支持此演示。 Internet Explorer 11将该字段显示为文本字段，而Firefox 32不显示建议的颜色。

该代码的实时演示如下所示， 可以作为JSFiddle使用 。

datalist和<input type="range">

另一个使用示例是与<input type="range">元素结合使用的：

<input type="range" value="0" min="0" max="100" list="numbers" />
<datalist id="numbers">
   <option value="20" /> 
   <option value="40" /> 
   <option value="60" /> 
   <option value="80" /> 
</datalist>

在这种情况下，在支持该演示的浏览器（Internet Explorer，Opera和Chrome）上，范围栏将具有四个等距的垂直符号，每个垂直符号用于datalist定义的每个值。

该代码的实时演示如下所示， 可以作为JSFiddle使用 。

浏览器支持

CanIUse显示了datalist 列表如何在桌面浏览器中获得很好的支持。 实际上，Firefox，Chrome和Opera的较早版本以及Internet Explorer 10+均支持该功能。 这意味着您可以在项目中可靠地使用它。 Safari不支持它，因此Mac用户有点不幸。

几乎没有实现该元素的移动浏览器。 唯一支持它的浏览器是Firefox和Chrome for mobile，以及最新版本的Blackberry浏览器。

填充胶

如果您想在不了解该元素的浏览器中提供对此元素的支持，则可以使用“ 相关下拉列表”或jQuery HTML5数据列表插件 。 请记住，在使用文本字段的情况下，这些polyfill只能作为替换，这意味着您不能polyfill范围或颜色。

结论

在本文中，我向您介绍了datalist元素以及如何将其用于创建本机自动完成小部件。 正如您在所示示例中看到的那样，它也可以用于非文本字段，例如颜色和范围。 最后，浏览器之间的支持足以在生产中采用此元素。

您知道这个元素吗？ 你曾经用过吗？ 让我们开始讨论。

From: https://www.sitepoint.com/creating-autocomplete-datalist-controls/