如何为multiselect-dropdown.js插件添加optgroup选项组展示功能

你需要对现有插件代码做3处修改，即可支持optgroup分组显示，且分组标签不带复选框：

找到JS代码中创建style标签的部分，在style.innerHTML的CSS末尾添加以下样式：

/* 分组标签样式 */
.multiselect-dropdown-optgroup {
  font-weight: bold;
  background-color: #f8f9fa;
  padding-left: 8px !important;
  cursor: default;
}
/* 禁用分组hover高亮 */
.multiselect-dropdown-optgroup:hover {
  background-color: #f8f9fa !important;
}
/* 分组下选项缩进，区分层级 */
.multiselect-dropdown-group-option {
  padding-left: 20px !important;
}

找到el.loadOptions函数中原来遍历Array.from(el.options).map(o=>{...})的代码段，整段替换为以下逻辑：

// 遍历select直接子节点，区分optgroup和普通option
Array.from(el.childNodes).forEach(node => {
  // 处理分组
  if(node.tagName === 'OPTGROUP'){
    // 渲染分组标签，无复选框
    const groupEl = newEl('div', {
      class: 'multiselect-dropdown-optgroup',
      text: node.label
    });
    list.appendChild(groupEl);
    // 遍历分组下的所有option
    Array.from(node.options).forEach(o => {
      const op = newEl('div', {
        class: [o.selected ? 'checked' : '', 'multiselect-dropdown-group-option'].filter(Boolean),
        optEl: o
      })
      const ic = newEl('input', {type: 'checkbox', checked: o.selected});
      op.appendChild(ic);
      op.appendChild(newEl('label', {text: o.text}));
      op.addEventListener('click', () => {
        op.classList.toggle('checked');
        op.querySelector("input").checked = !op.querySelector("input").checked;
        op.optEl.selected = !!!op.optEl.selected;
        el.dispatchEvent(new Event('change'));
      });
      ic.addEventListener('click', (ev) => {
        ic.checked = !ic.checked;
      });
      list.appendChild(op);
    })
  }
  // 处理无分组的普通option
  else if(node.tagName === 'OPTION'){
    const op = newEl('div', {
      class: node.selected ? 'checked' : '',
      optEl: node
    })
    const ic = newEl('input', {type: 'checkbox', checked: node.selected});
    op.appendChild(ic);
    op.appendChild(newEl('label', {text: node.text}));
    op.addEventListener('click', () => {
      op.classList.toggle('checked');
      op.querySelector("input").checked = !op.querySelector("input").checked;
      op.optEl.selected = !!!op.optEl.selected;
      el.dispatchEvent(new Event('change'));
    });
    ic.addEventListener('click', (ev) => {
      ic.checked = !ic.checked;
    });
    list.appendChild(op);
  }
})

找到搜索框的input事件监听代码，整段替换为以下逻辑，实现搜索时如果分组下有匹配选项，分组标签自动显示：

search.addEventListener('input', () => {
  const keyword = search.value.toUpperCase();
  let currentGroup = null;
  let groupHasMatch = false;
  list.querySelectorAll("div").forEach(d => {
    // 处理分组标签
    if(d.classList.contains('multiselect-dropdown-optgroup')){
      // 更新上一个分组的显示状态
      if(currentGroup){
        currentGroup.style.display = groupHasMatch ? 'block' : 'none';
      }
      currentGroup = d;
      groupHasMatch = false;
      d.style.display = 'none';
      return;
    }
    // 处理选项匹配
    const txt = d.querySelector("label").innerText.toUpperCase();
    const isMatch = txt.includes(keyword);
    d.style.display = isMatch ? 'block' : 'none';
    if(isMatch && currentGroup){
      groupHasMatch = true;
      currentGroup.style.display = 'block';
    }
  });
  // 更新最后一个分组的显示状态
  if(currentGroup){
    currentGroup.style.display = groupHasMatch ? 'block' : 'none';
  }
});

修改完成后即可实现需求：optgroup分组标签正常显示、无复选框、不可选中，分组下的选项自动缩进，搜索功能也可正常适配分组结构。

内容的提问来源于stack exchange，提问作者laurence keith albano