如何实现jQuery自定义下拉菜单搜索框的选项实时过滤功能

完全保留现有HTML结构、CSS样式、已实现的下拉基础交互（展开/收起、选项选中、ESC关闭、外部点击关闭），不修改任何原有类名，仅追加搜索过滤相关逻辑即可实现需求。

核心逻辑 #

• 给.select2-search搜索输入框绑定实时输入事件，触发时获取检索关键词
• 遍历.list容器下所有.item选项，做不区分大小写的文本模糊匹配
• 匹配成功的选项保持显示，匹配失败的选项隐藏
• 阻止搜索框事件冒泡，避免触发外部点击关闭下拉的逻辑导致交互异常
• 下拉展开时自动清空搜索状态、聚焦搜索框，优化使用体验

代码实现 #

对应HTML结构（和你已调整好的结构完全一致，无需修改） #

<div class="custom-select">
  <!-- 原有下拉触发按钮 -->
  <div class="select-trigger">请选择选项</div>
  <!-- 原有下拉列表容器 -->
  <div class="list">
    <!-- 你新增的搜索输入框，类名完全保留 -->
    <input type="text" class="select2-search form-control form-control-sm" placeholder="搜索选项">
    <!-- 调整后的div选项结构 -->
    <div class="item" data-value="1">选项1</div>
    <div class="item" data-value="2">选项2</div>
    <div class="item" data-value="3">选项3</div>
    <!-- 其余item选项保持原有结构即可 -->
  </div>
</div>

jQuery交互代码（直接追加到你现有JS逻辑末尾即可，原有代码无需改动） #

$(document).ready(function() {
  // -- 你之前写好的所有下拉交互逻辑保留在上方，无需修改 --

  // 搜索框实时过滤逻辑
  $('.list').on('input', '.select2-search', function(e) {
    // 阻止事件冒泡，避免输入时被判定为外部点击导致下拉收起
    e.stopPropagation();
    // 获取搜索关键词，去空格、转小写实现不区分大小写匹配
    const keyword = $(this).val().trim().toLowerCase();
    // 遍历当前下拉下所有选项做匹配
    $(this).closest('.list').find('.item').each(function() {
      const itemText = $(this).text().trim().toLowerCase();
      // 选项文本包含关键词则显示，否则隐藏
      $(this).toggle(itemText.includes(keyword));
    });
  });

  // 下拉展开时重置搜索状态、聚焦搜索框（可选，不影响原有功能）
  // 注意：如果你的下拉通过特定类名（如.open/.show）控制展开状态，把判断条件替换成你自己的展开判定逻辑即可
  $('.select-trigger').on('click', function() {
    const $list = $(this).siblings('.list');
    // 判定为展开状态时执行重置
    setTimeout(() => {
      if ($list.is(':visible')) {
        $list.find('.select2-search').val('').trigger('input').focus();
      }
    }, 0);
  });

  // 阻止搜索框点击事件冒泡，避免点击搜索框时下拉意外收起
  $('.list').on('click', '.select2-search', function(e) {
    e.stopPropagation();
  });
})

可自定义调整点 #

• 匹配规则：默认是不区分大小写的模糊包含匹配，如果需要其他匹配规则，替换itemText.includes(keyword)即可：
  • 精确匹配：itemText === keyword
  • 开头匹配：itemText.startsWith(keyword)
• 如果需要无匹配结果时显示提示，可在遍历逻辑后统计显示的item数量，数量为0时动态插入提示节点即可，不影响原有结构。

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