jquery-select-filter demonstration

A quick demonstration of jquery-select-filter.

HTML

<script src="https://s3.amazonaws.com/files-krichardson-co/jquery.select-filter.min.js"></script>
<h1>jquery-select-filter demonstration</h1>
<div>
    <select id="example-element">
        <option>Duarremy</option>
        <option>Rodd</option>
        <option>Frett</option>
        <option>Keil</option>
        <option>Nathane</option>
        <option>Wadon</option>
        <option>Dallary</option>
        <option>Gabristin</option>
        <option>Roberedro</option>
        <option>Jerrenry</option>
        <option>Glarl</option>
        <option>Chrian</option>
        <option>Paurenny</option>
        <option>Shine</option>
        <option>Danna</option>
        <option>Jacherry</option>
        <option>Veristin</option>
        <option>Arley</option>
        <option>Leorgia</option>
        <option>Jessa</option>
        <option>Glarl</option>
        <option>Chrian</option>
        <option>Paurenny</option>
        <option>Shine</option>
        <option>Danna</option>
        <option>Jacherry</option>
        <option>Veristin</option>
        <option>Arley</option>
        <option>Leorgia</option>
        <option>Jessa</option>
        <option>Finato</option>
        <option>Vustreli</option>
        <option>Tann</option>
        <option>Ralaid</option>
        <option>Eowugai</option>
        <option>Tard</option>
        <option>Vicaravos</option>
        <option>Dhabiaz</option>
        <option>Thuilus</option>
        <option>Ezean</option>
    </select>
    <button href="#" id="apply-select-filter">apply select filter</button>
</div>
<footer>
    <hr>
    <small>Download your own copy at <a href="https://github.com/kfr2/jquery-select-filter/" title="download jquery-select-filter from GitHub">github.com/kfr2/jquery-select-filter/</a></small>
</footer>

CSS

h1 { text-align: center; margin-top: 2em; }
div { width: 40%; margin-left: auto; margin-right: auto; text-align: center; }
hr { width: 30%; margin-left: 0; margin-top: 3%; }
footer{ margin-left: 2em; }

JavaScript

$(document).ready(function() {
    $('#apply-select-filter').on('click', function() {
        $('#example-element').selectFilter({
            width: '100%',
            minimumSelectElementSize: 5,
            inputLocation: 'above'
        });

        $(this).hide();
    });
});