multiple select dropdown (tupe, eto na yung code)

component-kodropdown-multi.js

function KODropDownComponent(params) {
    var self = this;
    self.version = "1.0.0";
    self.dropdownFilter = params.value;
    self.dropdownLabel = params.label;
    self.dropdownDetails = params.details || params.label;
    self.dropdownHeader = params.header || params.label;
    self.dropdownItems = params.items || [];
    self.dropdownLinkCss = params.css;
    self.itemText = params.itemText || "";
    self.itemValue = params.itemValue || "";
    ko.utils.arrayForEach(self.dropdownItems, function (item) {
      item.isSelected = ko.observable(false);
    });
    ko.computed(function () {
      var _selectedValues = ko.utils.arrayFilter(self.dropdownItems, function (item) { return item.isSelected(); });
      self.dropdownFilter(_selectedValues);
    });
    self.setItemText = function (item) {
        return self.itemText ? item[self.itemText] : item;
    };
    self.clearFilter = function (value, event) {
        var $el = $(event.target),
            $dropdown = $el.closest(".dropdown-menu");
        self.dropdownFilter('');
        $dropdown.hide();
    };
    self.showDropdown = function (value, event) { //bootstrap's script won't work
        var $toggle = $(event.target).closest(".dropdown-toggle"),
            $dropdown = $toggle.siblings(".dropdown-menu"),
            dropDownTop = $toggle.offset().top + $toggle.outerHeight() - $(window).scrollTop();
        $dropdown.toggle();
        $dropdown.css("top", dropDownTop + "px");
        $dropdown.css("left", $toggle.offset().left + "px");
    };
}
 
ko.components.register('component-kodropdown', {
    viewModel: KODropDownComponent,
    template: '<div class="dropdown">\
                <a href="#" class="dropdown-toggle dropdown-label" data-toggle="dropdown" data-bind="css: $component.dropdownLinkCss, attr: {title: $component.dropdownDetails}, click: $component.showDropdown">\
                    <div style="display: inline;" data-bind="text: $component.dropdownLabel"></div>\
                    <span style="display: none;" data-bind="visible: $component.dropdownFilter()" class="glyphicon glyphicon-filter"></span>\
                    <span class="caret" style="margin-top: 0px; margin-left: 0px;"></span>\
                </a>\
                <ul class="dropdown-menu scrollable-menu" style="color: #000;">\
                    <li class="dropdown-header" data-bind="text: $component.dropdownHeader"></li>\
                    <li><a href="#" data-bind="click: $component.clearFilter">Clear Filter</a></li>\
                    <li class="divider"></li>\
                    <!-- ko foreach: { data: $component.dropdownItems, as: \'dropdownItem\' } -->\
                    <li>\
                        <input type="checkbox" data-bind="checked: dropdownItem.isSelected">\
                        <span data-bind="text: $parent.itemText ? dropdownItem[$parent.itemText] : dropdownItem "> </span>\
                    </li>\
                    <!-- /ko -->\
                </ul>\
            </div>'
});

usage.txt

JAVASCRIPT

youViewModel = {
  angFiltersMo = ko.observableArray([]), //eto dating ko.observable('')
  
  angPagpipilian = [{ name: 'ping guerrero', ss: 'assasinate' }, 
    { name: 'christina moran', ss: 'moonlight shadow' },
    { name: 'elizabeth logan', ss: 'viper strike'}],
    
  angSasalaingData = [{some data from server}],
  
  angNasalangData = ko.computed(function () {
    return ko.utils.arrayFilter(angSasalaingData, function (tableData) {
      var _isSameWithFilter = false;
      
      //sa filtering method papalitan mo yung pagcompare ng filtervalue ng ganitong loop
      ko.utils.arrayForEach(angFiltersMo, function (filterData) {
        _isSameWithFilter = filterData.name === tableData.name;
      });
      
      return _isSameWithFilter;
    });
  })
}


HTML
<table>
 <thead>
  <tr>
    <th>
      <component-kodropdown params="value: $root.angFiltersMo, items: $root.angPagpipilian, header: 'Hero Name'"></component-kodropdown>
    </th>
  </tr>
  </thead>
  
  <tbody>
  <tr>
   <td>
    <!-- some markup to display something on the table -->
   </td>
  </tr>
  </tbody>
</table>