html - 带有选项值的输入文本的 HTML 数据列表

Question

在谷歌浏览器中，这允许我在输入“b”或“r”后从下拉列表中选择“红色”和“蓝色”：

<input type="text" list="colors" />
<datalist id="colors">
  <option value="red">
  <option  value="blue">
</datalist>

但是，在 Safari 中却没有。

1. 为什么？

2. 如果我希望它在 Safari 中这样做，我需要做什么？

Answer 1

这个<datalist>标签实际上在 Safari 中还没有被原生支持。但是，有一些解决方案可以解决这个问题。以下是与<datalist>标签的浏览器兼容性列表。
Chrome: 20.0
IE: 10.0
Firefox: 4.0
Safari:不支持
Opera: 9.0
解决方案 A
您可以考虑使用<select>标签，尽管这样做有其缺点。与<datalist>标签不同，用户需要选择您提供的选项之一。对于<datalist>标签，用户可以输入他想要的任何内容。
解决方案 B
创建一个<select>元素和一个<input>元素以匹配<datalist>标签的双重功能。

<p>Choose from this list
<select>
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>
or type in a custom input
<input type="text" name="custominput">

解决方案 C
使用 polyfill 解决方案来解决它。这更复杂。您必须使用该modenizr库来完成此任务。
http://css-tricks.com/relevant-dropdowns-polyfill-for-datalist/
解决方案 D
您可以使用诸如webshim 之类的数据填充库，它使您能够跨浏览器可靠地使用 HTML5 功能，尽管缺乏本机支持。
http://afarkas.github.io/webshim/demos/

Answer 2

Safaridatalist不支持该标签， IE部分支持该标签，请在此处查看支持。

您应该考虑使用select标签（如果要允许多个值，请使用 multiple 属性）：

<select multiple>
  <option value="red">red</option>
  <option value="blue">blue</option>
  <option value="green">green</option>
</select>

或者您可以使用Relevant Dropdown一个 HTML5 数据列表 polyfill，它可以帮助您解决跨浏览器问题。