datalist polyfill demo

Introduction - Internet Explorer 9

Thanks to @Kravimir for mentioning the main IE9s problem (that is additionally outlined here: https://stackoverflow.com/questions/12394512/get-datalist-options-in-ie9-with-javascript), that could be solved by wrapping the option elements:


		<datalist id="animallist" title="Choose a suggestion">

			    <!--[if IE 9]><select disabled style="display:none" class="ie9_fix"><![endif]-->

				        <option value="Cat">

				        <option value="Cow">

				        <option value="Dog">

				        <option value="Horse">

				        <option value="Lion">

				        <option value="Pig" disabled>

				        <option value="Zebra">

			    <!--[if IE 9]></select><![endif]-->

		</datalist>

Basis

What's your favorite animal Animal:

Right to left

What's your favorite animal Animal:

Advanced

Different ways of defining an option

Choose an option


			<option value="option 1">

			<option>option 2</option>

			<!-- With an output similar to how Google Chrome displays the suggestion: displaying both the label as even also the value, that would get inserted into the form field -->

			<option value="option value 3">option label 3</option>

			 <!-- With an output as the other browsers would display the suggestion: displaying the label, but inserting the value -->

			<option value="option value 4" label="option label 4">

thank you @aFarkas for your great overview: https://github.com/h5bp/html5please/issues/18

Options:

Input type email

Whom you'd like to reach out to Email address(es):

Input type number (with a bigger amount of options)

Choose a number wisely Number:

Input type search

Please provide a search term Search:

Input type tel

Who you gonna call? Telephone no.:

Input type url

What's your favorite website URLs: