Selectize.js多选下拉框无搜索文本时隐藏选项异常问题问询

问题根因 #

多选模式下，用户完成单次选择后，Selectize会自动清空搜索框内容并重新聚焦输入区域，此时会触发下拉框打开事件，且lastQuery被重置为空，原逻辑仅处理了首次打开和输入为空的场景，没有覆盖选择后的下拉触发行为，导致全部选项自动弹出。

修复后代码 #

HTML部分（无变更） #

<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.js"></script>

<select multiple class="form-control select-key" id="sel2" name="key-list[]">
  <option>SBI Cap</option>
  <option>PGIM MidCap</option>
  <option>Axis SmallCap</option>
  <option>Kotak Technology</option>
  <option>SBI Technology</option>
</select>

JS部分（修改后） #

$(function () {
  $("#sel2").selectize({
    onDropdownOpen: function($dropdown) {
      // 只要当前搜索框无输入就关闭下拉
      if (!this.$control_input.val().trim().length) {
        this.close();
      }
    },   
    onType : function (str) {
      if (str.trim() === "") {
        this.close();
      }
    },
    onItemAdd: function() {
      // 选择完选项后清空搜索关键词并关闭下拉
      this.setTextboxValue("");
      this.close();
    }
  });
});

逻辑说明 #

• 把原判断lastQuery改为直接读取输入框当前值，避免lastQuery被内部重置导致判断失效
• 新增onItemAdd钩子，用户选择完选项后主动清空搜索框、关闭下拉，阻断后续自动打开的触发链路
• 保留输入为空时关闭下拉的逻辑，覆盖用户主动删除搜索内容的场景

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