使用Ajax加载数据时，jQuery Selectize.js下拉选项清理问题求助

问题根源 #

直接调用clearOptions()会移除所有选项，包括已选中项对应的选项——而Selectize需要依赖选项的存在来维持已选中状态，因此会导致选中项被意外删除。正确的做法是只清除未被选中的下拉选项，保留已选中项对应的选项。

修改后的完整代码 #

var selectize = $('#selectize').selectize({
  sortField: 'text',
  loadThrottle: 500,
  onFocus: function() {
    if (this.items[0] == '0') {
      this.clear();
    }
  },
  // 下拉关闭时清理未选中选项（满足初始需求）
  onDropdownClose: function() {
    const selectedValues = new Set(this.items);
    Object.keys(this.options).forEach(key => {
      if (!selectedValues.has(key)) {
        this.removeOption(key);
      }
    });
    // 清除输入框文本
    this.clear();
  },
  load: function(query, callback) {
    if (!query.length || query.length < 2) return callback();

    // 保留已选中项对应的选项，仅删除未选中的旧选项
    const selectedValues = new Set(this.items);
    Object.keys(this.options).forEach(key => {
      if (!selectedValues.has(key)) {
        this.removeOption(key);
      }
    });
    // 清空渲染缓存，避免旧选项UI残留
    this.renderCache = {};

    const value = this.currentResults.query;
    // 模拟Ajax加载数据
    const ajaxData = [
      {'value': '31', 'text': 'aaa yyy'}, 
      {'value': '32', 'text': 'aaa xxx'}, 
      {'value': '33', 'text': 'aaa zzz'}
    ];
    callback(ajaxData);

    // 维持下拉菜单打开状态
    this.blur();
    this.focus();

    // 恢复输入框文本
    setTimeout(() => {
      this.setTextboxValue(value);
    }, 100);
  }
});

关键逻辑说明 #

1. 保留已选中项：通过new Set(this.items)获取当前已选中项的value集合，遍历所有选项时跳过这些value对应的选项，只删除未被选中的旧选项。
2. 下拉关闭清理：在onDropdownClose事件中重复上述清理逻辑，同时清除输入框文本，实现你最初“下拉关闭时删除选项、清除输入文本”的需求。
3. 避免UI残留：清空renderCache确保旧选项的渲染痕迹被清除，新加载的选项能正常显示。

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