启用Safari/Opera上的datalist的脚本

我犯了一个使用html特性而不先查找的恐怖错误，而且，当我离开部署网站几个小时时，我意识到Safari并没有有数据列表的支持...启用Safari/Opera上的datalist的脚本

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

这是因为观众的很大一部分用于这个特定的网站相当麻烦的事情包括技术上和受损，因此，我希望野生动物园构成30-网站访问量的50％。

现在，我可以看到如何使用JavaScript编写用于datalist的简单多边形填充，以便我可以只包含一个脚本标记并无痛地摆脱问题，而无需填充整个html，但是我无法找到说的JavaScript。

我不是在要求你们写信，如果我想浪费一大堆时间，我可以明显地做到这一点。我希望你们知道这是一个真正考验过的图书馆，因为我的愚蠢和愤怒似乎无法找到。

在任何人在这个问题上评论，是的，这是愚蠢的我不要做并行测试Safari上考虑多达一半的用户可以从那里来的...但事后看来是20-20

编辑：我应该提到，我发现了两个插件，可悲的是，现代化依赖于Jquery &，这实际上是我不想承担的那种依赖。

编辑：有人将这个问题标记为重复，没有明显的阅读问题。因此，我会重申我的问题：

我想要一个为Safari/Opera mini填充数据列表的JavaScript脚本。现在，让我们通过这些条款，我们将：

- > 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/

问题与对方的回答是：一）它以HTML编辑，它不是一个JavaScript您插入怕疼，并允许其他人阅读代码没有去：他妈的是什么？ b）它用一个select元素替换datalist。它可以服务于相同的目的，如果您不希望用户输入除预定义选项以外的其他任何内容，如果您不关心该元素是如何可视化的，并且如果您不关心这样一个事实，用户必须从列表中选择（非常烦人的移动）。

这是所提出的解决方案是如何工作的（那个在“重复”的问题）：

<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/

所以，这个问题确实相似，但其类似于WASN”问题我从来没有解决过我想要的解决方法，而不是“necro bumping”（甚至不知道它是否可能）。

现在，为了举例说明，我想什么（在GitHub上一些挖掘后发现的）：

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

- >无外部依赖性，只有几百行的js和css - >可以是简单地包含在html中，它使现有的数据专家工作，而不会损坏html。- >使输入元素在safari和opear mini上的行为与其在firefox，chrome和android浏览器中的行为相同。它提供了相同的功能并且看起来相同。它不是“这将取代元素具有不同的行为，但经常用于类似的情况”它的一个“这与JavaScript不支持它的浏览器模仿你的元素”

我将这个答案发布到类似的问题，以防人们阅读时想要另一种选择。但我想尽可能清楚地解释为什么这不是重复的，因为它被问到我。

来源

2016-11-19 George

请参阅此处的解决方法：http://stackoverflow.com/questions/27494084/html5-datalist-tag-is-not-populating-in-safari –

检查https://jqueryui.com/autocomplete/ .. you只需要包含jquery源文件..这就是全部...... – repzero

@Tim它是一种解决方法，将元素替换为具有不同行为的元素，而不是我所要求的。 – George

的回答我的问题被发现挖掘在GitHub上了一下：

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

基本上是一个简短而亲切的.js和.css，你可以在HTML和它使datalists链接输入行为Safari浏览器和Opera Mini上的功能与Chrome，Firefox和Android Browser上的功能相同。

来源

2016-11-19 22:00:28 George

启用Safari/Opera上的datalist的脚本

回答

相关问题