Menu
I have a datalist tag which allows my users to have a suggestion box. However, I've noticed that this feature is not supported in safari. Is there a workaround to this issue?
Here is my code - I'm actually populating my values with an ajax method but this is what it would look like after it's populated:
<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"> I also have a fiddle here
501
Both iOS or desktop Safari still do not support datalist, and there's no sign so far of this changing.
Unfortunately, Internet Explorer and Chrome are the only browsers to support datalists on range inputs at this time.
The datalist tag is introduced in HTML5. The <datalist> tag should be used with an <input< element that contains a "list" attribute. The value of "list" attribute is linked with the datalist id.
Generally, both the tags are used for choosing an option from the given list. But the main difference between both is that in the <datalist> tag the user can enter its own input and add that as an option with the help of the <input> element whereas the <select> tag doesn't provide this feature.
The code from this example site only paints the input form field and button, but the drop down datalist feature is inoperable in Safari 10.0.1 on OS X 10.11.6, and macOS Sierra 10.12.1. Another link with more discussion about datalist.
Update: Safari TP supports the datalist element at least basically, and its functionality will be included within the next release of Safari both for iOS and MacOS X. Yeah !!! Exciting news!
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. Show activity on this post. As of Safari 12.1, datalist is now finally supported.
The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds them together). The numbers in the table specify the first browser version that fully supports the element. The <datalist> tag also supports the Global Attributes in HTML. The <datalist> tag also supports the Event Attributes in HTML.
Both iOS or desktop Safari still do not support datalist, and there's no sign so far of this changing. So this is a hack making it appear to get around the issue. Chris Coyier also had a go at a datalist polyfill back in 2011. Let's hope Safari implements the existing W3C Recommendation in future.
You can use a select element inside the datalist, and duplicate the option tag values as readable text in these. For example:
<!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> Supporting browsers will just display the datalist, Safari and older browsers will show the option tags' innerHTML. The input tag has a default border, which in Safari looks bad behind the select element, but with a little styling as shown in this example, you can get around Safari's lack of support and keep the same functional appearance. No need for Javascript and/or polyfills.
79
Datalist elements are not supported in Safari. http://caniuse.com/#feat=datalist
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
