如何使用HTML5 Datalist的轻量级自动完成控件

在本教程中，我们将深入研究很少使用的HTML5<datalist> 元素。它可以实现一个轻量级的、可访问的、跨浏览器的自动完成表单控件，不需要JavaScript。

<select> 有什么问题吗？

当你希望用户从一个小范围的选项中进行选择时，HTML5<select> 控件是理想的选择。在以下情况下，它们就不太实用了。

• 有很多选项，例如国家或工作职位
• 用户想输入自己的选项，而这个选项不在列表中

明显的解决方案是一个自动完成控件。这允许用户输入几个字符，从而限制了可用的选项，以便快速选择。

<select> 当你开始输入时，会跳到正确的位置，但这并不总是很明显。它不会在所有的设备上工作（如触摸屏），而且会在一两秒钟内重置。

开发人员经常求助于许多由JavaScript驱动的解决方案之一，但自定义自动完成控件并不总是必要的。HTML5<datalist> 元素是轻量级的，可访问的，并且没有JavaScript依赖性。你可能听说它有问题或缺乏支持。在2021年并非如此，但存在浏览器的不一致性和注意事项。

<datalist> 快速启动

从一个包含200多个选项的列表中挑选你的国家，是一个理想的自动完成控件的候选人。在HTML页面中直接为每个国家定义一个带有子元素<option> 的<datalist> 。

<datalist id="countrydata">
  <option>Afghanistan</option>
  <option>Åland Islands</option>
  <option>Albania</option>
  <option>Algeria</option>
  <option>American Samoa</option>
  <option>Andorra</option>
  <option>Angola</option>
  <option>Anguilla</option>
  <option>Antarctica</option>
  ...etc...
</datalist>

然后，数据列表的id 可以被任何<input> 字段中的list 属性所引用。

<label for="country">country</label>

<input type="text"
  list="countrydata"
  id="country" name="country"
  size="50"
  autocomplete="off" />

令人困惑的是，最好是设置autocomplete="off" 。这可以确保用户在<datalist> ，而不是他们之前在浏览器中输入的值。

其结果是。

这就是微软Edge中的默认渲染。其他应用程序也实现了类似的功能，但不同平台和浏览器的外观是不同的。

<option> 选项

使用标签作为<option> 的文本子项是很常见的。

<datalist id="mylist">
  <option>label one</option>
  <option>label two</option>
  <option>label three</option>
</datalist>

使用value 属性会产生相同的结果。

<datalist id="mylist">
  <option value="label one" />
  <option value="label two" />
  <option value="label three" />
</datalist>

注意：结尾的/> 斜线在HTML5中是可选的，尽管它可以帮助防止编码错误。

你也可以根据所选择的标签，使用以下任何一种格式来设置一个值。

选项1

<datalist id="mylist">
  <option value="1">label one</option>
  <option value="2">label two</option>
  <option value="3">label three</option>
</datalist>

选项2

<datalist id="mylist">
  <option value="1" label="label one" />
  <option value="2" label="label two" />
  <option value="3" label="label three" />
</datalist>

在这两种情况下，当选择一个有效的选项时，输入字段被设置为1,2 或3 ，但不同的浏览器的用户界面是不同的。

• Chrome显示的是一个包含值和标签的列表。一旦选择了一个选项，就只剩下值了。
• 火狐浏览器显示的是一个只有标签的列表。一旦选择了一个选项，它就会切换到值。
• Edge只显示值。

下面的CodePen例子显示了所有的变化。

请参阅CodePen上SitePoint (@SitePoint) 的Pen
HTML5 自动完成示例。

实现将不断发展，但就目前而言，我建议你不要使用一个值和标签，因为这很可能会混淆用户。(下面将讨论一个变通方法）。

<datalist> 浏览器支持和回退

<datalist> 元素在现代浏览器以及Internet Explorer 10和11中得到了良好的支持。

有几个实施说明，但它们不会影响大多数的使用。最坏的情况是一个字段恢复到标准文本输入。

如果你绝对要支持IE9及以下的浏览器，有一个回退模式，当<datalist> 失败时，会使用一个标准的<select> 与一个文本输入相结合。改编国家的例子。

<label for="country">country</label>

<datalist id="countrydata">

  <select name="countryselect">
    <option></option>
    <option>Afghanistan</option>
    <option>Åland Islands</option>
    <option>Albania</option>
    <option>Algeria</option>
    <option>American Samoa</option>
    <option>Andorra</option>
    <option>Angola</option>
    <option>Anguilla</option>
    <option>Antarctica</option>
    ...etc...
  </select>

  <label for="country">or other</label>

</datalist>

<input type="text"
  id="country" name="country"
  size="50"
  list="countrydata"
  autocomplete="off" />

请参阅CodePen上SitePoint（@SitePoint）的Pen
HTML5 自动完成回退模式

在现代浏览器中，<option> 元素成为<datalist> 的一部分，并且不显示*"或其他 "*标签。它看起来与上面的例子相同，但countryselect 表单值将被设置为一个空字符串。

在IE9及以下版本中，（很长的）<select> 和文本输入栏都是活动的。

这两个值都可以在旧的IE中输入。你的应用程序必须要么。

• 决定哪个是最有效的，或者
• 使用一个小的JavaScript函数，在另一个被改变时重置一个

继续阅读：在SitePoint上使用HTML5 Datalist的轻量级自动完成控件。