如何在清除Chosen.js搜索结果时销毁mCustomScrollbar？

嘿，我看你已经在尝试结合Chosen.js和mCustomScrollbar了，思路挺靠谱的——在下拉隐藏时销毁滚动条，但要精准针对搜索结果清除这个场景，咱们得调整事件监听的时机，毕竟chosen:hiding_dropdown只有下拉面板关闭时才触发，而清空搜索框、清除搜索结果是在下拉面板打开时发生的呀。

下面是优化后的代码方案，能完美覆盖你要的场景：

$(function() {
  // 初始化Chosen组件
  $('select.select').chosen({
    disable_search_threshold: 5,
    width: '50%'
  });

  // 下拉面板显示时初始化滚动条
  $('select.select').on('chosen:showing_dropdown', function() {
    const $visibleResults = $('.chosen-results:visible');
    // 避免重复初始化
    if (!$visibleResults.data('mCustomScrollbar')) {
      $visibleResults.mCustomScrollbar({
        theme: 'minimal-dark',
        autoHideScrollbar: false
      });
    }
  });

  // 监听Chosen的搜索事件，精准处理搜索结果清除场景
  $('select.select').on('chosen:search', function(e, params) {
    const $results = $('.chosen-results:visible');
    // 当搜索关键词为空时，说明是清除了搜索结果
    if (!params.search.length) {
      // 先检查滚动条是否已初始化，避免报错
      if ($results.data('mCustomScrollbar')) {
        $results.mCustomScrollbar('destroy');
      }
    } else {
      // 如果有搜索内容，滚动条没初始化的话就重新加上
      if (!$results.data('mCustomScrollbar')) {
        $results.mCustomScrollbar({
          theme: 'minimal-dark',
          autoHideScrollbar: false
        });
      }
    }
  });

  // 下拉面板隐藏时销毁滚动条，保留这个兜底逻辑
  $('select.select').on('chosen:hiding_dropdown', function() {
    const $results = $(".chosen-results");
    if ($results.length && $results.data('mCustomScrollbar')) {
      $results.mCustomScrollbar('destroy');
    }
  });
});

几个关键的改进点： #

• 新增chosen:search事件监听：这个事件会在用户输入搜索关键词（包括清空内容）时触发，通过params.search就能拿到当前的搜索文本，轻松判断是否是“清除搜索结果”的场景。
• 增加滚动条存在性检查：用data('mCustomScrollbar')判断滚动条是否已经初始化，避免重复调用destroy或init导致控制台报错。
• 保留原有的兜底逻辑：chosen:hiding_dropdown的销毁逻辑还是留着，确保下拉面板关闭时滚动条能被正确清理。

你的CSS样式可以保持不变：

.chosen-drop .chosen-results {
  max-height: 100px !important;
}

这样调整后，不管是用户清空搜索框清除结果，还是关闭下拉面板，滚动条都能被及时销毁或按需初始化，完全符合你的需求~

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