datalist-polyfill demo page

hint: Your browser the native datalist element.

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: