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:, 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]-->


What's your favorite animal

Right to left

What's your favorite animal


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:

Input type email

Whom you'd like to reach out to

Input type number (with a bigger amount of options)

Choose a number wisely

Input type search

Please provide a search term

Input type tel

Who you gonna call?

Input type url

What's your favorite website