Javascript Safari 中未填充 HTML5 数据列表标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27494084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 datalist tag is not populating in Safari
提问by R Doolabh
I have a datalist tag which allows my users to have a suggestion box. However, I've noticed that this feature is not supported in safari. Is there a workaround to this issue?
我有一个 datalist 标签，它允许我的用户有一个建议框。但是，我注意到 safari 不支持此功能。这个问题有解决方法吗？
Here is my code - I'm actually populating my values with an ajax method but this is what it would look like after it's populated:
这是我的代码 - 我实际上是用 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">
I also have a fiddle here
我这里也有小提琴
采纳答案by Tim Dearborn
Datalist elements are not supported in Safari. http://caniuse.com/#feat=datalist
Safari 不支持数据列表元素。 http://caniuse.com/#feat=datalist
回答by Dave Everitt
HTML5 datalist workaround for Safari and/or older browsers
Safari 和/或旧浏览器的 HTML5 数据列表解决方法
Update, Jan 2017
2017 年 1 月更新
Both iOS or desktop Safari still do not support datalist, and there's no sign so far of this changing. So this is a hack making it appearto get around the issue. Chris Coyier also had a go at a datalist polyfill back in 2011. Let's hope Safari implements the existing W3C Recommendationin future.
iOS 或桌面Safari 仍然不支持 datalist，并且到目前为止没有任何变化的迹象。所以这是一个黑客，使它看起来解决了这个问题。Chris Coyier 还在2011 年尝试了datalist polyfill。让我们希望 Safari在未来实现现有的 W3C 推荐标准。
Original post:
原帖：
You can use a selectelementinside the datalist, and duplicate the optiontag values as readable text in these. For example:
您可以使用一个select元素里面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>
Supporting browsers will just display the datalist, Safari and older browsers will show the optiontags' innerHTML. The inputtag has a default border, which in Safari looks bad behind the selectelement, but with a little styling as shown in this example, you can get around Safari's lack of support and keep the same functional appearance. No need for Javascript and/or polyfills.
支持的浏览器将只显示datalist, Safari 和旧浏览器将显示option标签的innerHTML。该input标签有一个默认的边界上，在Safari很糟糕的背后select因素，但在这个例子中所示的小造型，让您可以Safari的缺乏支持并保持相同的功能外观。不需要 Javascript 和/或 polyfill。
回答by George
I realize its a bit late, but, for those who want a solution that mimics datalist on Safari, rather than replacing it with a select:
我意识到它有点晚了，但是，对于那些想要在 Safari 上模拟 datalist 的解决方案的人，而不是用选择替换它：
https://github.com/Fyrd/purejs-datalist-polyfill
https://github.com/Fyrd/purejs-datalist-polyfill
Basically a short and sweet .js and .css that you can include in your html and it makes datalists linked inputs behave the same on Safari and Opera mini as they do on Chrome, Firefox and Android Browser.
基本上是一个简短而甜蜜的 .js 和 .css，您可以将它们包含在您的 html 中，它使数据列表链接输入在 Safari 和 Opera mini 上的行为与在 Chrome、Firefox 和 Android 浏览器上的行为相同。
回答by Motine
As of Safari 12.1, datalist is now finally supported. Please see the Apple release notes.
从 Safari 12.1 开始，现在终于支持 datalist。请参阅Apple 发行说明。
It seems that the developer of the mdnrecommended polyfillstays quite up to date:
Update: Safari TP supports the datalist element at least basically, and its functionality will be included within the next release of Safari both for iOS and MacOS X. Yeah !!! Exciting news! I'm planning to release a new major version soon to both cheer as well as accommodate their implementation
更新：Safari TP 至少基本上支持 datalist 元素，它的功能将包含在下一个 iOS 和 MacOS X 版本的 Safari 中。是的！！！！令人兴奋的消息！我计划很快发布一个新的主要版本，以鼓励并适应他们的实施
回答by Mianto
First, thank you George for you script that work again today. For those which get trouble cause your options are display in the top left hand corner (like iamse7en) you should modify these lines in datalist.polyfill.js :
首先，感谢 George 为您编写的脚本今天再次生效。对于那些因为您的选项显示在左上角（如 iamse7en）而出现问题的问题，您应该修改 datalist.polyfill.js 中的这些行：
56 :
56 :
document.body.appendChild( fakeList );
document.getElementById("myIdDiv").appendChild( fakeList );
document.body.appendChild( fakeList );
document.getElementById("myIdDiv").appendChild( fakeList );
Bescause in the exemple on the github project it was only one div in the body so it was not a problem.
因为在github项目的例子中它只有一个div，所以这不是问题。
110 :
110：
input.value = item.innerText;
input.value = item.innerHTML;
input.value = item.innerText;
input.value = item.innerHTML;
To click anywhere on the item and not only on the text.
单击项目上的任意位置而不仅仅是文本。
And finaly add the <script src="/static/js/datalist.polyfill.js"></script>on your html file but not the version datalist.polyfill.min.js
最后<script src="/static/js/datalist.polyfill.js"></script>在你的 html 文件中添加，而不是版本 datalist.polyfill.min.js
回答by EvilJordan
Further to what Mianto said regarding iamse7en's issue, in order to bind your datalist to a dynamic DIV (the example Mianto gave and then Moritz edited is hard-coded), change the following at line 51:
除了 Mianto 关于 iamse7en 的问题所说的内容之外，为了将您的数据列表绑定到动态 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 );
to:
到：
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 );
