1. I use this plugin to make multiselect more comfortable – http://loudev.com/.
2. I have also integrated search via quicksearch plugin.
3. And I have set optgroup can be selected

But I would need, if any query is searched and optgroup is selected, to select only options which were found. If item is not match searched query, it is hidden via style="display: none", so I thought best practice to filter them out is to use :visible selector, but it does not work. I’ve also tried :not(:hidden), but it does not work either.

This is the code, which selects all options when optgroup is clicked.

$selectableOptgroup.find('.ms-optgroup-label').on('click', function(){
  var values = $optgroup.children(':not(:selected, :disabled)').map(function(){ return $(this).val();}).get();
  that.select(values);
});

And I’ve tried to edit this way, but still all options are selected.

$selectableOptgroup.find('.ms-optgroup-label').on('click', function(){
  var values = $optgroup.children(':not(:selected, :disabled, :hidden)').map(function(){ return $(this).val();}).get();
  that.select(values);
});

This is HTML which I got when I call init function of multiselect plugin.

<div class="ms-container" id="ms-email_contacts">
  <div class="ms-selectable"><input type="text" class="search-input" placeholder="... vyhledávání ...">
    <ul class="ms-list" tabindex="-1">
      <li class="ms-optgroup-container" id="optgroup-selectable--1866734926">
        <ul class="ms-optgroup">
          <li class="ms-optgroup-label" style=""><span>group 1</span></li>
          <li class="ms-elem-selectable" id="1698467390-selectable" style=""><span>[email protected] (pr-1)</span></li>
          <li class="ms-elem-selectable" id="-181089201-selectable" style=""><span>[email protected]</span></li>
        </ul>
      </li>
      <li class="ms-optgroup-container" id="optgroup-selectable--1867902347">
        <ul class="ms-optgroup">
          <li class="ms-optgroup-label" style=""><span>Group 2</span></li>
          <li class="ms-elem-selectable" id="-29257990-selectable" style=""><span>[email protected] (pr-1)</span></li>
          <li class="ms-elem-selectable" id="289161371-selectable" style=""><span>[email protected]</span></li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="ms-selection"><input type="text" class="search-input" placeholder="... vyhledávání ...">
    <ul class="ms-list" tabindex="-1">
      <li class="ms-optgroup-container" id="optgroup-selection--1866734926">
        <ul class="ms-optgroup">
          <li class="ms-optgroup-label" style="display: none;"><span>group 1</span></li>
          <li class="ms-elem-selection" id="1698467390-selection" style="display: none;"><span>[email protected] (pr-1)</span></li>
          <li class="ms-elem-selection" id="-181089201-selection" style="display: none;"><span>[email protected]</span></li>
        </ul>
      </li>
      <li class="ms-optgroup-container" id="optgroup-selection--1867902347">
        <ul class="ms-optgroup">
          <li class="ms-optgroup-label" style="display: none;"><span>Group 2</span></li>
          <li class="ms-elem-selection" id="-29257990-selection" style="display: none;"><span>[email protected] (pr-1)</span></li>
          <li class="ms-elem-selection" id="289161371-selection" style="display: none;"><span>[email protected]</span></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

And I init it by this function:

  function selectMulti(id, search_msg) {
    $('#' + id).multiSelect({
      selectableOptgroup: true,
      keepOrder: true,
      selectableHeader: '<input type="text" class="search-input" placeholder="' + search_msg + '">',
      selectionHeader: '<input type="text" class="search-input" placeholder="' + search_msg + '">',
      afterInit: function(ms) {
        var that = this,
            $selectableSearch = that.$selectableUl.prev(),
            $selectionSearch = that.$selectionUl.prev(),
            selectableSearchString = '#'+that.$container.attr('id')+' li.ms-elem-selectable:not(.ms-selected)',
            selectionSearchString = '#'+that.$container.attr('id')+' li.ms-elem-selection.ms-selected';
        that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
        .on('keydown', function(e){
          if (e.which === 40){
            that.$selectableUl.focus();
            return false;
          }
        });
        that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
        .on('keydown', function(e){
          if (e.which == 40){
            that.$selectionUl.focus();
            return false;
          }
        });
      },
      afterSelect: function() {
        this.qs1.cache();
        this.qs2.cache();
      },
      afterDeselect: function() {
        this.qs1.cache();
        this.qs2.cache();
      }
    });
  }