Select2 third-party plugin

@@adsense
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
This is third-party plugin. To use this plugin you must download it from the home page.

Direct init
Metro UI CSS init
Metro UI CSS init with options
Multiple
Select states

Important! States for select object displayed only for select placed in input-control container.

How to use

Include Select2 plugin

                <script src="select2.min.js"></script>
Direct initialization

                <select id="select">
                    <option>option</option>
                    ...
                    <option>option</option>
                </select>

                <script>
                    $(function(){
                        $("#select").select2();
                    });
                </script>
Metro UI CSS declarative style

                <div class="input-control" data-role="select">
                    <select>
                    <option>option</option>
                    ...
                    <option>option</option>
                    </select>
                </div>

                <div class="input-control error" data-role="select">
                    <select>
                    <option>option</option>
                    ...
                    <option>option</option>
                    </select>
                </div>
Metro UI CSS declarative style with options

                <div class="input-control" data-template-result="fmtState" data-role="select">
                    <select>
                        <option>option</option>
                        ...
                        <option>option</option>
                    </select>
                </div>

                <script>
                    function fmtState (state) {
                        if (!state.id) { return state.text; }
                        var $state = $(
                            '<span>'+
                            '<img src="images/flags/' +
                            state.element.value.toLowerCase() +
                            '.png" class="img-flag" /> ' +
                            state.text +
                            '</span>'
                        );
                        return $state;
                    }
                </script>