Safari和/或旧浏览器的HTML5 datalist解决方法

Question

我有一个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

Answer 1

Safari和/或旧浏览器的HTML5 datalist解决方法

2017年1月更新

iOS或桌面Safari still do not support datalist，到目前为止还没有迹象表明这种变化。所以这是一个黑客使它出现来解决这个问题。克里斯科伊尔也有一个datalist polyfill back in 2011。让我们希望Safari在未来实现existing W3C Recommendation。

原帖：

您可以在datalist内use a select element，并将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和/或polyfills。

Answer 2

Safari不支持Datalist元素。 http://caniuse.com/#feat=datalist

Answer 3

我意识到它有点晚了，但是，对于那些想要在Safari上模仿datalist的解决方案，而不是用select替换它：

https://github.com/Fyrd/purejs-datalist-polyfill

基本上你可以在你的html中包含一个短而甜的.js和.css，它使得数据列表链接输入在Safari和Opera mini上的行为与在Chrome，Firefox和Android浏览器上的行为相同。

Answer 4

首先，感谢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;

要在项目的任何地方单击，而不仅仅是在文本上。

最后将<script src="/static/js/datalist.polyfill.js"></script>添加到您的html文件中，而不添加版本datalist.polyfill.min.js

Answer 5

根据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 );

收件人：

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 );

Answer 6

从Safari 12.1开始，现在终于支持数据列表。请参阅Apple release notes。

mdn recommended polyfill的开发人员似乎保持最新状态：

更新：Safari TP至少基本上支持datalist元素，并且其功能将包含在适用于iOS和MacOS X的Safari的下一发行版中。是的！令人兴奋的消息！我打算尽快发布一个新的主要版本，以期为他们的实现欢呼并适应他们的实施

Safari中没有填充HTML5 datalist标记

6 个答案:

Safari和/或旧浏览器的HTML5 datalist解决方法

2017年1月更新

原帖：