JSFiddle - React, Tailwind, and code Playground

by oceog

HTML

<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<select id='test' class="testclass">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    <option value="4">test4</option>
</select>
<select id='test1' class="testclass">
    <option value="5">test5</option>
    <option value="6">test6</option>
    <option value="7">test7</option>
    <option value="8">test8</option>
</select>

CSS

.testclass {
    width: 150px;
}

JavaScript

//инициализация плагина
(function ($) {
    jQuery.fn.select2_e = function () {
        $(this).each(function (n, element) {
            //тут превращаем select в input              
            var $element = $(element),
                choices = $element.find('option').map(function (n, e) {
                    var $e = $(e);
                    return {
                        id: $e.val(),
                        text: $e.text()
                    };
                }),
                width = $element.width(),
                $input = $('<input>', {
                    width: width
                });
            $element.hide().after($input);
            //превратили

            $input.select2({
                query: function (query) {
                    var data = {}, i;
                    data.results = [];

                    // подтставим то что искали

                    if (query.term !== "") {
                        data.results.push({
                            id: query.term,
                            text: query.term
                        });
                    }

                    // добавим остальное

                    for (i = 0; i < choices.length; i++) {
                        if (choices[i].text.match(query.term) || choices[i].id.match(query.term)) data.results.push(choices[i]);
                    }

                    query.callback(data);
                }
            }).on('change', function () {
                var value = $input.val();
                $element.empty();
                $element.append($('<option>').val(value))
                $element.val(value).trigger('change');
            });;
            return $element;
        });
        return this;
    }
})(jQuery);

//пример использования
jQuery(function ($) {
    console.log($('.testclass').select2_e().on('change', function () {
        alert(this.value)
    }));
});