When in Google Chrome, this allows me to pick "red" and "blue" from a drop down after typing "b" or "r":
<input type="text" list="colors" />
<datalist id="colors">
<option value="red">
<option value="blue">
</datalist>
However, in Safari it does not.
Why?
If I wanted it to do so in Safari, what would I need to do?
The <datalist> tag is actually not natively supported in Safari yet. However, there are a few solutions to the problem. Below is a list of browser compatability with the <datalist> tag.
Chrome: 20.0
IE: 10.0
Firefox: 4.0
Safari: Not Supported
Opera: 9.0
Solution A
You might consider using a <select> tag, though this does have its disadvantages. Unlike the <datalist> tag, the user is required to select one of the options you've given. For a <datalist> tag, the user can enter anything he wants.
Solution B
Create a <select> element and an <input> element to match the dual functionality of the <datalist> tag.
<p>Choose from this list
<select>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
or type in a custom input
<input type="text" name="custominput">
Solution C
Use a polyfill solution to solve it. This is more complicated. You'll have to use the modenizr library to accomplish this task.
http://css-tricks.com/relevant-dropdowns-polyfill-for-datalist/
Solution D
You can use a datafill library such as webshim, which enables you to reliably use HTML5 features across browsers, despite the lack of native support.
http://afarkas.github.io/webshim/demos/
The datalist tag is not supported by Safari and is partially support by IE, checkout the support here.
You should consider use the select tag (with the multiple attribute if you want to allow multiple values):
<select multiple>
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
</select>Or you can use Relevant Dropdown a HTML5 datalist polyfill which could help you to fix your crossbrowser issues.
