我有一个datalist标签，允许我的用户有一个建议框。但是，我注意到Safari中不支持此功能。这个问题有解决方法吗？
这是我的代码 - 我实际上是用ajax方法填充我的值，但这是它填充后的样子：
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Java">
<option value="Ruby">
<option value="PHP">
<option value="Go">
<option value="Erlang">
<option value="Python">
<option value="C">
<option value="C#">
<option value="C++">
</datalist>
Search:
<input type="text" list="languages">
我也有一个小提琴here
Safari不支持Datalist元素。 http://caniuse.com/#feat=datalist
无论是iOS还是桌面Safari still do not support datalist，到目前为止还没有迹象表明这种变化。所以这是一个黑客使它似乎绕过这个问题。 Chris Coyier也参加了datalist polyfill back in 2011比赛。让我们希望Safari将来实施existing W3C Recommendation。
您可以在use a select element中使用datalist，并将option标记值复制为这些中的可读文本。例如：
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style>
input[list="languages"] {
width: 12em;
border: none;
background: #eee;
}
select {
width: 12em;
margin: 0;
margin-left: -12.75em;
}
</style>
</head>
<body>
Choose: <input type="text" list="languages">
<label for="languages">
<datalist id="languages">
<select>
<option value="JavaScript">JavaScript</option>
<option value="Haskell">Haskell</option>
<option value="Ruby">Ruby</option>
<option value="Go">Go</option>
<option value="Python">Python</option>
<option value="etc">etc</option>
</select>
</datalist>
</label>
</body>
</html>
支持浏览器只显示datalist，Safari和旧浏览器将显示option标签的innerHTML。 input标签有一个默认的边框，在Safari中看起来很糟糕的select元素，但是这个例子中显示了一些小样式，你可以绕过Safari缺乏支持并保持相同的功能外观。无需Javascript和/或polyfill。
我意识到它有点晚了，但是，对于那些想要在Safari上模仿datalist的解决方案而不是用select替换它的人：
https://github.com/Fyrd/purejs-datalist-polyfill
基本上你可以在你的html中包含一个短而甜的.js和.css，它使得数据列表链接输入在Safari和Opera mini上的行为与在Chrome，Firefox和Android浏览器上的行为相同。
从Safari 12.1开始，最终支持datalist。请参阅Apple release notes。
似乎mdn recommended polyfill的开发者保持最新状态：
更新：Safari TP至少基本上支持datalist元素，其功能将包含在iOS的下一个版本中，适用于iOS和MacOS X.是的！令人兴奋的消息！我计划尽快发布一个新的主要版本，以便为他们的实施提供支持
首先，谢谢George为你今天再次工作的脚本。对于那些遇到麻烦的人，你的选项会显示在左上角（如iamse7en），你应该在datalist.polyfill.js中修改这些行：
56 :
document.body.appendChild( fakeList );
document.getElementById("myIdDiv").appendChild( fakeList );
因为在github项目中的例子，它只是身体中的一个div所以它不是问题。
110 :
input.value = item.innerText;
input.value = item.innerHTML;
单击项目上的任何位置，而不仅仅是文本。
最后在你的html文件中添加<script src="/static/js/datalist.polyfill.js"></script>但不是版本datalist.polyfill.min.js
除了Mianto关于iamse7en问题的说法之外，为了将您的datalist绑定到动态DIV（Mianto给出的示例，然后Moritz编辑的示例是硬编码的），请在第51行更改以下内容：
function convert(input, datalist, listItems) {
var fakeList = document.createElement('ul');
var visibleItems = null;
fakeList.id = listId;
fakeList.className = LIST_CLASS;
document.body.appendChild( fakeList );
至：
function convert(input, datalist, listItems) {
var fakeList = document.createElement('ul');
var visibleItems = null;
fakeList.id = listId;
fakeList.className = LIST_CLASS;
input.parentNode.style.position = "relative";
input.parentNode.appendChild( fakeList );