Script to enable datalist on Safari/Opera
<p>I made the horrible mistake of using an html feature without looking it up first and, lo and behold, when I'm a few hours away from deploying a website I realize Safari doesn't have support for datalist...</p>

<p><a href="http://caniuse.com/#search=datalist" rel="nofollow noreferrer">http://caniuse.com/#search=datalist</a></p>

<p>This is a rather troublesome thing since a large part of the audience for this specific website consists of the technologically impaired and, as such, I expect safari to constitute 30-50% of all access on the website.</p>

<p>Now, I can see how a simple-ish polyfill for datalist could be written in JavaScript, so that I can just include a script tag and painlessly-ish get rid of the problem without having to shim my whole html, but I can't find said JavaScript.</p>

<p>I'm not asking for you guys to write it, I could obviously do that myself if I wanted to waste a bunch of time. I'm hoping you guys know of a true-tested library for this that I, in my stupidity and anger can't seem to find right now.</p>

<p>Before anyone comments on the issue, yes, it was stupid of me not to do parallel testing on Safari considering up to half my users could come from there... but hindsight is 20-20</p>

<p>edit: I should mention, I found two plugin which were sadly, Jquery&amp;modernizer depended, and that's really the kind of dependency I'd rather not take on.</p>

<p>Edit: Someone marked this question as a duplicate without apparently reading the questions. I will, as such, restate my question:</p>

<p>I want a Javascript script that polyfills datalists for Safari/Opera mini. Now, lets go through these terms, shall we:</p>

<p>-> Javascript != Hmtml
-> polyfill: <a href="https://en.wikipedia.org/wiki/Polyfill" rel="nofollow noreferrer">https://en.wikipedia.org/wiki/Polyfill</a> Let me TL;DR: Allows you to implement a feature that is not supported by a browser.</p>

<p>-> datalist: allows the user to type words dynamically in an input element and suggests autcompletes from a drop-downlist. It looks like this:</p>

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

<p><a href="https://jsfiddle.net/a5o2cna3/" rel="nofollow noreferrer">https://jsfiddle.net/a5o2cna3/</a></p>

<p>Problem with the other answer is that:
a) It take html editing, its not a javascript that you insert painlessly and that allows other human beings to read the code without going: What the fuck is that ?
b) It REPLACES the datalist by a select element. It can server the same purpose IF you don't want users to input anything but the predefined options, IF you don't care about how the element look visually AND IF you don't care about the fact that, instead of typing, the user has to select from a list (very annoying on mobile).</p>

<p>This is how the proposed solution works (the one in the "duplicate" question):</p>

<pre><code>&lt;body&gt;
Choose: &lt;input type="text" list="languages"&gt;
&lt;label for="languages"&gt;
    &lt;select id="languages"&gt;
      &lt;option value="JavaScript"&gt;JavaScript&lt;/option&gt;
      &lt;option value="Haskell"&gt;Haskell&lt;/option&gt;
      &lt;option value="Ruby"&gt;Ruby&lt;/option&gt;
      &lt;option value="Go"&gt;Go&lt;/option&gt;
      &lt;option value="Python"&gt;Python&lt;/option&gt;
      &lt;option value="etc"&gt;etc&lt;/option&gt;
    &lt;/select&gt;
&lt;/label&gt;
</code></pre>

<p><a href="https://jsfiddle.net/vv63pptj/" rel="nofollow noreferrer">https://jsfiddle.net/vv63pptj/</a></p>

<p>So, this question is indeed similar but its similar to a question that wasn't ever solved the way I wanted it solve it, and instead of "necro bumping" (don't even know if its possible). </p>

<p>Now, to exemplify what I wanted (and found after some digging on github):</p>

<p><a href="https://github.com/Fyrd/purejs-datalist-polyfill" rel="nofollow noreferrer">https://github.com/Fyrd/purejs-datalist-polyfill</a></p>

<p>-> No external dependencies, just a few hundred lines of js and css
-> Can be simply included in the html and it makes existing datalists work without mangling the html
-> Makes the input element behave on safari and opear mini the same way it behaves in firefox, chrome and android browser. It offer the same functionality and looks the same. Its not a "This replace you element with an element with different behavior but often used for similar situations" its a "This mimics your element with javascript for browsers that don't support it"</p>

<p>I shall post this answer to the similar question, in case people reading that want an alternative. But I wanted to explain as clear as possible why this is not a duplicate, since it was asked of me.</p>