在 Safari/Opera 上启用数据列表的脚本

Question

我犯了一个可怕的错误，没有先查找就使用了 html 功能，你瞧，当我距离部署网站还有几个小时时，我意识到 Safari 不支持对于数据列表...

http://caniuse.com/#search=datalist

这是一件相当麻烦的事情，因为这个特定网站的大部分受众都是技术障碍者，因此，我预计 safari 将占该网站所有访问量的 30-50%。

现在，我可以看到如何在 JavaScript 中为数据列表编写一个简单的 polyfill，这样我就可以只包含一个脚本标签并轻松地解决问题而无需填充我整个 html，但我找不到 said JavaScript.

我不是要你们写，如果我想浪费很多时间，我显然可以自己写。我希望你们知道一个经过真正测试的库，我现在似乎无法找到我的愚蠢和愤怒。

在有人评论这个问题之前，是的，考虑到我一半的用户可能来自那里，我不在 Safari 上进行并行测试是愚蠢的……但事后看来是 20-20

编辑：我应该提一下，我发现了两个令人遗憾的插件，Jquery&modernizer 依赖，这真的是我不想接受的那种依赖。

编辑：有人在没有阅读问题的情况下将此问题标记为重复。因此，我将重申我的问题：

我想要一个 Javascript 脚本来填充 Safari/Opera mini 的数据列表。现在，让我们来看看这些条款，我们：

-> Javascript != Hmtml -> polyfill：https://en.wikipedia.org/wiki/Polyfill 让我 TL;DR：允许您实现浏览器不支持的功能。

-> datalist：允许用户在输入元素中动态键入单词，并从下拉列表中建议自动完成。它看起来像这样：

<body>
Choose: <input type="text" list="languages">
<label for="languages">
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Haskell"></option>
      <option value="Ruby"></option>
      <option value="Go"></option>
      <option value="Python"></option>
      <option value="etc"></option>
    </datalist>
</label>

https://jsfiddle.net/a5o2cna3/

另一个答案的问题是： a) 它需要 html 编辑，它不是 javascript 你可以毫不费力地插入并且允许其他人阅读代码而无需去：那他妈的是什么？ b) 它用 select 元素替换数据列表。如果您不希望用户输入除预定义选项以外的任何内容，如果您不关心元素在视觉上的外观以及如果您不关心这样一个事实，而不是键入，它可以达到相同的目的用户必须从列表中 select（在移动设备上非常烦人）。

建议的解决方案是这样工作的（"duplicate" 问题中的解决方案）：

<body>
Choose: <input type="text" list="languages">
<label for="languages">
    <select id="languages">
      <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>
</label>

https://jsfiddle.net/vv63pptj/

所以，这个问题确实很相似，但它类似于一个从未按照我希望的方式解决的问题，而不是 "necro bumping"（甚至不知道它是否可能） .

现在，举例说明我想要的（在 github 上进行一些挖掘后发现）：

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

-> 没有外部依赖，只有几百行js和css -> 可以简单地包含在 html 中，它使现有的数据列表在不破坏 html 的情况下工作 -> 使输入元素在 safari 和 opear mini 上的行为与在 firefox、chrome 和 android 浏览器中的行为相同。它提供相同的功能并且看起来相同。它不是 "This replace you element with an element with different behavior but often used for similar situations" 它是 "This mimics your element with javascript for browsers that don't support it"

我将post回答类似的问题，以防读者需要其他选择。但我想尽可能清楚地解释为什么这不是重复的，因为有人问我。

Answer 1

我的问题的答案是在 github 上找到的：

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

基本上是一个简短而有趣的 .js 和 .css，您可以将其包含在 html 中，它使数据列表链接的输入在 Safari 和 Opera mini 上的行为与在 Chrome、Firefox 和 Android 浏览器。

Answer 2

Safari 支持将成为即将发布的 iOS 和 MacOS 版本的一部分，很可能会在 3 月底 February/beginning 发布。

你也可以为此使用另一个 polyfill：https://github.com/mfranzke/datalist-polyfill/

在 Safari/Opera 上启用数据列表的脚本

Script to enable datalist on Safari/Opera

html

javascript

safari

polyfills