datalist experiment

By using <datalist>, you can define a list of suggestions you want the user to select from. Users can optionally select from your suggestions as well as typing it by themselves.

Options can be tagged with datalist and referenced from the input element using list attribute by its id. See examples below.

This example is taken from demo.agektmr.com/datalist/ and improved with webshims to make it cross browser.

With only one line of code, a developer can polyfill all incapable browsers:

webshim.polyfill('forms forms-ext');

And with some small configuration. All input widgets can be turned into highly customizable form widgets in all browsers:

webshim.setOptions('forms', {
	//replace the default datalist feature with a custom styleable datalist
	customDatalist: true
});
webshim.setOptions('forms-ext', {
	//replace all input type widgets with a custom styleable feature
	replaceUI: true // 'auto' || true || false (default)
});

//load form polyfills
webshim.polyfill('forms forms-ext');

Enhance/Polyfill/Customize all browsers (including modern browsers like Chrome)

input[type=text] datalist

For text type, datalist simply suggests list of words.

<input type="text" class="mark-option-text" list="fruits" />
<datalist id="fruits">
  <select>
    <option value="Apple"></option> 
    <option value="Orange"></option> 
    <option value="Peach"></option>
  </select>
</datalist>

input[type=email][multiple] datalist

For email type and multiple attribute datalist simply suggests list of words.

<input type="email" list="contacts" multiple data-list-filter="^" placeholder="Type your mail contacts" />
<datalist id="contacts">
  <select>
    <option value="art@example.net" label="Arthur Dent" />
    <option value="adamjosh@example.net" label="Adam Josh" />
    <option value="hedral@damowmow.com" />
    <option value="pillar@example.com" />
    <option value="astrophy@cute.example" />
    <option value="astronomy@science.example.org" />
  </select>
</datalist>

input[type=range] datalist

For range type, datalist suggests recommended value as ticks. Chrome snaps to those ticks when moving slider.

<input type="range" value="0" min="0" max="100" list="number" />
<datalist id="number">
  <select>
    <option>10</option> 
    <option>15</option> 
    <option>30</option> 
    <option>50</option> 
    <option>90</option> 
  </select>
</datalist>

input[type=color] datalist

For color type, datalist suggests the recommended color on the swatch palette. You can optionally pick arbitorary color from the color palette.

<input type="color" value="#000000" list="color" />
<datalist id="color">
  <select>
    <option>#ff0000</option> 
    <option>#0000ff</option> 
    <option>#00ff00</option> 
    <option>#ffff00</option> 
    <option>#00ffff</option> 
  </select>
</datalist>

input[type=date] datalist

For date type, datalist suggests a list of recommended dates. You can also specify labels for those dates by giving label attribute to option tags.

<input type="date" list="days" />
<datalist id="days">
  <select>
    <option label="Independence Day">2013-07-04</option>
    <option label="Labor Day">2013-09-02</option>
    <option label="Columbus Day">2013-10-14</option>
  </select>
</datalist>

input[type=time] datalist

For time type, datalist suggests a list of recommended times. You can also specify labels for those times by giving label attribute to option tags.

<input type="time" list="times" />
<datalist id="times">
  <select>
    <option label="Midnight">00:00</option>
    <option>06:00</option>
    <option label="Noon">12:00</option>
    <option>18:00</option>
  </select>
</datalist>

input[type=datetime-local] datalist

For datetime-local type, datalist suggests a list of recommended datetime-locals. You can also specify labels for those datetime-locals by giving label attribute to option tags.

<input type="datetime-local" list="datetime-locals" />
<datalist id="datetime-locals">
  <select>
    <option label="Santa Visit">2012-12-24T23:59</option>
    <option label="Chrismas party">2012-12-25T18:00</option>
    <option>2012-12-30T00:00</option>
    <option label="Happy New Year">2013-01-01T00:00</option>
  </select>
</datalist>

input[type=month] datalist

For month type, datalist suggests a list of recommended months. You can also specify labels for those months by giving label attribute to option tags.

<input type="month" list="months" />
<datalist id="months">
  <select>
    <option label="Eiji's birthday">1976-02</option>
    <option label="End of last century">2000-12</option>
    <option>2010-01</option>
    <option label="Now">2012-11</option>
  </select>
</datalist>