Safari中未填充HTML5数据列表标记
[英]HTML5 datalist tag is not populating in Safari
问题描述
I have a datalist tag which allows my users to have a suggestion box. 
我有一个datalist标记，该标记允许我的用户使用建议框。 However, I've noticed that this feature is not supported in safari. 但是，我注意到野生动物园不支持此功能。 Is there a workaround to this issue? 有没有解决此问题的方法？
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">
6 个解决方案
解决方案1
27 2016-02-15 11:15:22
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. iOS或台式机Safari仍不支持datalist ，到目前为止，这种变化尚无迹象。 So this is a hack making it appear to get around the issue. 因此，这是一个黑客， 似乎可以解决此问题。 Chris Coyier also had a go at a datalist polyfill back in 2011 . 克里斯·科耶尔（Chris Coyier） 在2011年也参加了一个数据列表polyfill 。 Let's hope Safari implements the existing W3C Recommendation in future. 让我们希望Safari在将来实现现有的W3C建议 。
Original post: 原始帖子：
You can use a select element inside the datalist , and duplicate the option tag values as readable text in these. 您可以在datalist 使用select元素 ，并在其中将option标签值复制为可读文本。 For example: 例如：
<!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 option tags' innerHTML. 支持的浏览器将仅显示datalist ，Safari和较旧的浏览器将显示option标签的innerHTML。 The input tag has a default border, which in Safari looks bad behind the select element, 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. input标签具有默认边框，在Safari中，该边框在select元素后看起来很差，但是如本示例所示，它具有一些样式，可以避免Safari缺乏支持并保持相同的功能外观。 No need for Javascript and/or polyfills. 无需Javascript和/或polyfill。
解决方案2
22 已采纳 2014-12-15 22:13:39
Datalist elements are not supported in Safari. Safari不支持数据列表元素。 http://caniuse.com/#feat=datalist http://caniuse.com/#feat=datalist
解决方案3
9 2016-11-19 22:03:50
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上数据列表而不是用select代替它的解决方案的人：
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. 基本上，您可以在HTML中包含简短而甜美的.js和.css，它使数据列表链接输入在Safari和Opera mini上的行为与在Chrome，Firefox和Android浏览器上的行为相同。
解决方案4
5 2019-04-05 18:17:01
As of Safari 12.1, datalist is now finally supported. 从Safari 12.1开始，现在终于支持数据列表。 Please see the Apple release notes . 请参阅Apple发行说明 。
It seems that the developer of the mdn recommended polyfill stays quite up to date: 似乎mdn 建议的polyfill的开发人员保持最新状态：
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 !!!
解决方案5
1 2018-08-28 06:55:20
First, thank you George for you script that work again today. 首先，感谢George为您编写的脚本今天可以再次使用。 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 : 对于那些麻烦原因，您的选择显示在左上角（例如iamse7en），您应该在datalist.polyfill.js中修改以下行：
56 : 56：
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;
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 最后，在HTML文件上添加<script src="/static/js/datalist.polyfill.js"></script> ，但不添加版本datalist.polyfill.min.js
解决方案6
0 2018-11-04 20:07:47
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 );
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.