datalist example using different options

by aybalasubramanian

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<div>
    <label for="option-input">
        options example
    </label>
    <input list="options" id="option-input" /> (default behavior)
    <datalist id="options">
        <!-- you have to add your option elements inside of a select element for legacy reasons -->
        <select>
            <option value="option 1" />
            <option>option 2</option>
            <option value="option value 3">option label 3</option>
            <option value="option value 4" label="option label 4" />
        </select>
    </datalist>
    
</div>
<div>
    <label for="option-input-opera">
        options example
    </label>
    <!-- set the class 'list-focus' and the datalist will be shown on focus -->
    <input list="options-opera" id="option-input-opera" data-list-focus="true" /> (open on focus behavior)
    <datalist id="options-opera">
        <!-- you have to add your option elements inside of a select element for legacy reasons -->
        <select>
            <option value="option 1" />
            <option>option 2</option>
            <option value="option value 3">option label 3</option>
            <option value="option value 4" label="option label 4" />
        </select>
    </datalist>
    </div>  
<div>
    <label for="search">
        options example
    </label>
    <input type="text" placeholder="Find U.S. State" list="states" id="search" data-list-filter="^"> (long list example + search-start behavior)
    <datalist id="states">
        <select>
            <option value="Alabama"></option>
            <option value="Alaska"></option>
            <option value="Arizona"></option>
            <option value="Arkansas"></option>
            <option value="California"></option>
            <option value="Colorado"></option>
            <option...

JavaScript

//implement datalist and override UI in modern browsers
if (window.webshims) {
    webshims.setOptions('forms', {
        customDatalist: true
    });
    webshims.polyfill('forms');
}