javascript - Script to enable datalist on SafariOpera

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

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.

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.

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.

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

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

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

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

-> Javascript != Hmtml -> polyfill: Let me TL;DR: Allows you to implement a feature that is not supported by a browser.

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

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

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

This is how the proposed solution works (the one in the "duplicate" question):

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

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

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

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

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.

http://caniuse./#search=datalist

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

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

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

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

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

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

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

This is how the proposed solution works (the one in the "duplicate" question):

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

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

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

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

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.

Share Improve this question edited Nov 19, 2016 at 22:02 asked Nov 19, 2016 at 13:22 George 4,0475 gold badges36 silver badges82 bronze badges

See the workaround here: stackoverflow./questions/27494084/… – Tim Grant Commented Nov 19, 2016 at 14:20
check jqueryui./autoplete ..you just have to inlcude the jquery source file..that's all.... – repzero Commented Nov 19, 2016 at 14:27
@Tim Its a workaround that replaces the element with another that has different behavior, not what I asked for. – George Commented Nov 19, 2016 at 21:58
1 @repzero Thank you, but I was looking for something that doesn't involve a huge dependency like Jquery. – George Commented Nov 19, 2016 at 21:59

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

The answer to my question was found digging a bit on github:

https://github./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.

Safari support will be part of the uping iOS and MacOS releases that most likely will be released end of February/beginning of March.

And you could as well use another polyfill for that: https://github./mfranzke/datalist-polyfill/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Script to enable datalist on SafariOpera - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)