不更换jquery.sumoselect-2.1.0，如何为多选下拉框添加搜索功能？

完全可以用JS（结合项目已有的jQuery）实现，不用额外插件。下面是具体的实现方案：

实现步骤与代码 #

1. 插入搜索输入框并绑定过滤逻辑 #

SumoSelect初始化后会生成固定结构的DOM，我们可以在它的下拉选项面板中插入搜索框，同时实现实时过滤：

$('.sumoselect').SumoSelect();

// 给companyFilter下拉框添加搜索功能
const $companySelect = $('.companyFilter');
const $sumoContainer = $companySelect.closest('.SumoSelect');
const $dropdownPanel = $sumoContainer.find('.optWrapper');

// 在下拉面板顶部插入搜索框
$dropdownPanel.prepend(`
  <div style="padding: 8px; border-bottom: 1px solid #eee;">
    <input type="text" placeholder="搜索公司..." style="width: 100%; padding: 6px; box-sizing: border-box;" class="sumo-search">
  </div>
`);

const $searchInput = $dropdownPanel.find('.sumo-search');

// 实时过滤选项
$searchInput.on('input', function() {
  const keyword = $(this).val().toLowerCase().trim();
  $dropdownPanel.find('li.opt').each(function() {
    const text = $(this).text().toLowerCase();
    // 根据关键词显示/隐藏选项
    $(this).toggle(text.includes(keyword));
  });
});

// 下拉框展开时重置搜索状态
$companySelect.on('click', function() {
  setTimeout(() => {
    $searchInput.val('');
    $dropdownPanel.find('li.opt').show();
  }, 10);
});

2. 代码说明 #

• DOM定位：通过closest('.SumoSelect')找到SumoSelect的容器，再获取固定类名的下拉面板.optWrapper，这是该组件初始化后必然生成的结构。
• 样式适配：内联样式保证搜索框和原有下拉面板的布局协调，你可以根据项目UI调整padding、border等样式。
• 过滤逻辑：监听输入事件，将关键词和选项文本统一转为小写后匹配，用toggle()方法控制选项的显示/隐藏状态。
• 状态重置：点击下拉框时延迟清空搜索框并恢复所有选项，避免切换下拉时残留过滤状态。

可选优化 #

如果需要支持按选项ID（value值）搜索，可以修改过滤逻辑，同时匹配选项的data-value属性（SumoSelect会把原option的value值存在这个属性中）：

$searchInput.on('input', function() {
  const keyword = $(this).val().toLowerCase().trim();
  $dropdownPanel.find('li.opt').each(function() {
    const text = $(this).text().toLowerCase();
    const value = $(this).attr('data-value').toLowerCase();
    $(this).toggle(text.includes(keyword) || value.includes(keyword));
  });
});

内容的提问来源于stack exchange，提问作者Denis