componente para múltipla seleção de arquivos (requer bootstrap)

selecionar-multiplo.html

<script src="selecionar-multiplo.js"></script>

<div class="selecionar-multiplo">
    <div class="row">

        <div class="form-group col-lg-12">
            <h4>Selecione usuários</h4>
            <input type="text" class="form-control filter-items" name="filter-items">
        </div>

        <div class="col-lg-12">
            <div class="row">
                <div class="available-items col-lg-6">
                    <p><strong>Usuários Disponíveis (<span class="available-items-counter"></span>)</strong></p>
                    <table class="table table-striped">
                        <tbody></tbody>
                    </table>
                </div>
                <div class="col-lg-6">
                    <p><strong>Usuários Selecionados (<span class="selected-items-counter"></span>)</strong></p>
                    <ul class="selected-items">
                    </ul>
                </div>
            </div>
        </div>

    </div>
</div>

selecionar-multiplo.js

function SelecionarMultiplo(options){
    var _this = this;

    for(property in options){
        this[property] = options[property]
    }

    if(typeof this.selected_items == "undefined") this.selected_items = [];

    this.search_field            = this.wrapper_element.find(".filter-items");
    this.available_items_element = this.wrapper_element.find(".available-items tbody");
    this.selected_items_element  = this.wrapper_element.find(".selected-items");
    this.available_items_counter = this.wrapper_element.find(".available-items-counter");
    this.selected_items_counter  = this.wrapper_element.find(".selected-items-counter");

    this.sort_available_items();
    this.sort_selected_items();

    this.render();

    this.search_field.on("keyup", function(){
        _this.render();
    });

}

SelecionarMultiplo.prototype = {
    assign_addition_and_remotion_events: function(){
        var _this = this;
        this.available_items_element.find("td").on({
            click: function(){
                var element = $(this);
                _this.add(_this.search_object_attribute(_this.available_items, "id", element.data().itemid));
            },

            mouseenter: function(){
                $(this).append("<span class=\"help-text\">adicionar</span>");
            },

            mouseleave: function(){
                $(this).find(".help-text").remove();
            }
        });

        this.selected_items_element.find("li").on({
            click: function(){ 
                var element = $(this);
                _this.remove(_this.search_object_attribute(_this.selected_items, "id", element.data().itemid));
            },

            mouseenter: function(){
                $(this).append("<span class=\"help-text\">remover</span>");
            },

            mouseleave: function(){
                $(this).find(".help-text").remove();
            }
        });
    },

    search_object_attribute: function(obj, attr, search_term){
        var output;
        obj.forEach(function(item){
            if(item[attr] == search_term){ 
                output = item;
            }
        });
        return output;
    },

    render: function(){
        this.available_items_element.html(this.generate_available_items_html());
        this.selected_items_element.html(this.generate_selected_items_html());
        this.assign_addition_and_remotion_events();
        this.available_items_counter.html(this.available_items.length)
        this.selected_items_counter.html(this.selected_items.length)
    },

    sort_by_item_name: function(item_list){
        var sorted_item_list = [];
        var item_names = [];
        
        item_list.forEach(function(item){
            item_names.push(item.name);
        });

        var sorted_item_names = item_names.sort();

        sorted_item_names.forEach(function(sorted_item_name){
            var found_item;
            item_list.forEach(function(item){
                if(item.name == sorted_item_name) found_item = item;
            });
            sorted_item_list.push(found_item);
        });

        return sorted_item_list;
    },

    generate_available_items_html: function(){
        var html_output = [];

        this.filter(this.available_items, this.search_field.val(), "name").forEach(function(item){
            html_output.push("<tr><td data-itemname=\""+item.name+"\" data-itemid=\""+item.id+"\">"+item.name+"</td></tr>");
        });

        if(html_output.length == 0) html_output.push("<p>Não foram encontrados usuários compatíveis com seus termos de busca.</p>")

        return html_output.join("\n")
    },

    generate_selected_items_html: function(){
        var html_output = [];

        this.selected_items.forEach(function(item){
            html_output.push("<li data-itemname=\""+item.name+"\" data-itemid=\""+item.id+"\">"+item.name+"</li>")
        });

        if(html_output.length == 0) html_output.push("Adicione usuários clicando nos seus respectivos nomes à esquerda.")

        return html_output.join("\n")
    },

    filter: function(list, search_filter, attribute){
        search_filter = new RegExp(".*"+search_filter+".*", "i");
        var filtered_list = [];
        list.forEach(function(item){
            if(item[attribute].match(search_filter) !== null) filtered_list.push(item);
        });
        return filtered_list;
    },

    sort_available_items: function(){
        this.available_items = this.sort_by_item_name(this.available_items);
    },

    sort_selected_items: function(){
        this.selected_items = this.sort_by_item_name(this.selected_items);
    },

    add: function(item){
        this.selected_items.push(item);
        this.sort_selected_items();

        this.remove_from_list("available_items", item.id)
        this.render();
    },

    remove: function(item){
        this.available_items.push(item);
        this.sort_available_items();

        this.remove_from_list("selected_items", item.id)
        this.render();
    },

    remove_from_list: function(array_name, id){
        var found_index;
        this[array_name].forEach(function(item, index){
            if(item.id == id) found_index = index;
        })
        
        this[array_name].splice(found_index, 1);
    },

    custom_indexOf: function(arr, item_to_search){
    },

    selected_ids: function(){
        var _this = this;
        var output = [];

        _this.selected_items.forEach(function(item){
            output.push(item.id);
        })

        return output;
    }

}

selecionar-multiplo.sass

.selecionar-multiplo
    .available-items
        height: 318px
        overflow: auto

        td
            cursor: pointer
            position: relative

    .selected-items
        padding: 0

        li
            display: block
            background-color: #e5e5e5
            padding: 5px 15px 5px 15px
            border-radius: 10px
            border: solid 1px #d3d3d3
            letter-spacing: 1px
            color: #666666
            margin: 0
            cursor: default
            position: relative

            + li
                margin: 10px 0
    
    .available-items, .selected-items
        *::selection 
            background: transparent

    .available-items td, .selected-items li
        cursor: pointer

        &:hover
            background-color: #d80546
            color: #fff

    .help-text
        padding: 3px 7px
        position: absolute
        right: 0
        text-transform: uppercase
        color: #fff
        font-size: 10px
        letter-spacing: 2px
        font-weight: bold