proekton.com/assets/lib/proekton-components/js/SimpleSelect.js

// `
class SimpleSelect {
    constructor($container, data) {
        this.container_id = $container.attr("id");
        this.data = data || SimpleSelect._collectData($container);
        let template = SimpleSelect.getTemplate("Header", this.container_id);
        $container.replaceWith(template);
        this._buildComponents();
        this._bindEvents();
    }

    static getTemplate(header, id) {
        let insert_template = `
<input class="select-box-search" type="text">
<span style="clear:both; display:block"></span>
`;

        let htmlTemplate =
            `
<span class="select-box-container" id="${id}">
    <div class="select-box-header">
        <span class="header">${header}</span>
         <i class="fa fa-question-circle-o" aria-hidden="true" title="bla-bla-bla..."></i>
    </div>
    <span class="select-box-search">
        ${insert_template}
    </span>
    <span class="select-box-options">
        <span class="box-wrapper">
            <ul>
            
            </ul>
        </span>
    </span>
    <span class="select-box-results">
        <span class="box-wrapper">
            <span class="main-part">
                <ul>
                </ul>
            </span>
        </span>
    </span>
    <span style="clear: both"></span>
</span>
`;
        return htmlTemplate;
    }

    clear() {
        this.$search_input.val("");
        this.$options_box.hide();
        this.$results_box.hide();
        this.selected_id = undefined;
    }

    connectSelectedContainer(selected_container) {
        this.selected_container = selected_container;

    }


    setHeader(header) {
        this.$header.html(header);
    }


    static _collectData($container) {
        let $options = $container.find('option');
        let data = [];
        $options.each(function () {
            data.push({id: $(this).val(), name: $(this).html()});
            // $(this).remove();
        });
        return data
    }

    _fillOptionsData() {
        let self = this;
        let $container = this.$options_box.find('ul');
        $container.html("");
        this.data.forEach(function (el) {
            let el_html = `<li data-id="${el.id}">${el.name}</li>`;
            $container.append($(el_html))
        });
        this.$select_box.find('li').on("click", this._onclickOptionsElement.bind(self));
    }

    _fillResultsData(search_text) {
        let self = this;

        function search(search_text) {
            // :FORMAT spec_list [{name, id}, ...]
            return self.data.filter(function (el) {
                return el.name.toLowerCase().indexOf(search_text.toLowerCase()) !== -1;
            });
        }

        function fillContainer($container, template, search_text, parent_id, exclude_id) {
            $container.html("");
            let search_res = search(search_text, parent_id, exclude_id);
            if (!search_res.length || (!exclude_id && parent_id === null)) {
                $container.append('<span>No Found</span>');
                return;
            }
            search_res.forEach(function (el) {
                $container.append(template(SelectBox.highlight(el.name, search_text), el.id));
            });
        }

        // FILL RESULTS
        let result_template = (el, id) => `<li><label><input type="checkbox" data-id="${id}"><i>${el}</i></label></li>`;
        //    MAIN PART
        let $container = this.$results_box.find('.main-part ul');
        fillContainer($container, result_template, search_text, self.parent_id);

        //    OTHER PART
        $container = this.$results_box.find('.other-part ul');
        fillContainer($container, result_template, search_text, null, self.parent_id);
        //FIXME: duplicate code --^
    }

    _buildComponents() {
        this.$select_box = $(`#${this.container_id}`);
        this.$header = this.$select_box.find('.select-box-header .header');
        this.$results_box = this.$select_box.find('.select-box-results');
        this.$options_box = this.$select_box.find('.select-box-options');
        this.$search_input = this.$select_box.find('input.select-box-search');
        // this.$button_add = this.$results_box.find('.button-add');
        // this.$button_add_options = this.$select_box.find('.button-add.options');
        // this.$editable_container = this.$select_box.find('.editable-container');
        this._fillOptionsData();
        this.$results_box.hide();
        this.$options_box.hide();
        // this.$button_add_options.hide();
        //    TODO: сделать проверку на наличие всех нужных элементов и их корректый jq select
    }

    _looseFocus() {
        this.$results_box.hide();
        this.$options_box.hide();
        if (!this.selected_id) this.$search_input.val("");
    }

    _bindEvents() {
        let self = this;
        $(document).click(function (event) {
            if ($(event.target).closest(`#${self.container_id}`).length) {
                return;
            }
            self._looseFocus();
        });
        // console.log("out ", this.$options_box);
        this.$search_input.on("input", function (e) {
            self._fillResultsData(self.$search_input.val());
            self.$results_box.show();
            self.$options_box.hide();

        });

        this.$search_input.on("click", function (e) {
            self.$options_box.show();
            self.$results_box.hide();
            self.$search_input.val("");

        });


        // this.$button_add.on("click", function (e) {
        //     self._onButtonAdd(e);
        // });

    }

    _onclickOptionsElement(e) {
        console.log("selelc with id =", $(e.target).data("id"));
        let el_id = $(e.target).data("id");
        this.selected_id = el_id;
        // this.$search_input.val($(e.target).html());
        if (this.selected_container) this.selected_container.add(this.selected_id, 40);
        this.$options_box.hide();
    }


}