Lou multi-select filter DUAL List by optgroup 标签

Question

我正在使用来自http://loudev.com/ 的引导多选...没有一个类似问题涉及双重列表和纯 JS。我需要能够按 optgroup 过滤搜索。当我搜索 optgroup 标签时，搜索结果（组的子级）消失了。

注意**我在示例图像中使用了不同的列表选项..但结果应该相同。

我尝试在 optgroup 标签及其子标签可见的位置进行编程。

js 小提琴示例：http://jsfiddle.net/ksweat/13sn45xL/23/

过滤前的列表：

过滤后的列表：

<select multiple="multiple" id="searchableb" name="my-select[]">      
  <optgroup label='Friends'>
    <option value='1'>Yoda</option>
    <option value='2' selected>Obiwan</option>
  </optgroup>
  <optgroup label='Enemies'>
    <option value='3'>Palpatine</option>
    <option value='4' disabled>Darth Vader</option>
  </optgroup>
</select>


$('.searchableb').multiSelect({
  selectableHeader: "<div class='custom-header'>All References</div><input type='text' class='search-input' autocomplete='off' placeholder=' Search '>",
  selectionHeader: "<div class='custom-header'>Assigned</div><input type='text' class='search-input' autocomplete='off' placeholder=' Search '>",
  enableClickableOptGroups: true,
  enableCollapsibleOptGroups: true,
  enableFiltering: true,
  includeSelectAllOption: true,
  afterInit: function (ms) {
    var that = this,
      $selectableSearch = that.$selectableUl.prev(),
      $selectionSearch = that.$selectionUl.prev(),
      selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
      selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';


    that.qs1 = $selectableSearch.quicksearch(selectableSearchString,{
      'show': function () {

        $(this).prev(".ms-optgroup-label").show();
        $(this).show();
      },
      'hide': function () {
        $(this).prev(".ms-optgroup-label").hide();
        $(this).hide();
      }
    })
      .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 (values) {
    let url = $('#typeEdit').val();
    // get removed emps
    let removedRefs = $('.removedRefs').val();
    removedRefs = removedRefs.split(',');
    console.log('values', values)
    let listid = values[0].split("- / -");

    // if an employee is reselected, find in string and remove
    var index = removedRefs.indexOf(listid[0]);
    if (index > -1) {
      removedRefs.splice(index, 1);
    }
    removedRefs = removedRefs.toString();
    console.log(removedRefs);
    this.qs1.cache();
    this.qs2.cache();
  },

  afterDeselect: function (values) {
    let url = $('#typeEdit').val();
    let action = false;
    let removedRefs = $('.removedRefs').val();
    let listid = values[0].split("- / -");
    console.log(listid[0])
    vals.push(listid[0]);
    $('.removedRefs').val(vals);


    console.log(vals)

    this.qs1.cache();
    this.qs2.cache();
  },
  selectableOptgroup: true
});

我希望当你搜索 Enemies 时，Palpatine 和 Darth Vader 选项应该会出现

双重传输列表的示例都具有搜索选项： dual transfer list image

当前用于帮助搜索的 JS：https://github.com/riklomas/quicksearch

Answer 1

此代码首先显示所有选项，然后隐藏与搜索不匹配的 optgroup。

let searchstr = "Enemies";

document.querySelectorAll("#searchableb optgroup").forEach(function(e){
    e.style.display = "block";
});

document.querySelectorAll("#searchableb optgroup:not([label*='" + searchstr + "'])").forEach(function(e){
    e.style.display = "none";
});

<select multiple="multiple" id="searchableb" name="my-select[]">      
  <optgroup label='Friends'>
    <option value='1'>Yoda</option>
    <option value='2' selected>Obiwan</option>
  </optgroup>
  <optgroup label='Enemies'>
    <option value='3'>Palpatine</option>
    <option value='4' disabled>Darth Vader</option>
  </optgroup>
</select>