如何让Tom Select显示全部返回结果且每次请求清空状态？

问题 #

我的服务器回调返回的是预先过滤好的数据，希望Tom Select能展示查询返回的全部结果。尝试设置searchField: []，但会保留之前输入查询的旧结果，具体问题如下：

1. 结果缺失

• 用户搜索“Zurich”或“St Gallen”
• 服务器返回“Zürich”或“St. Gallen”，但Tom Select因结果与输入字符串不匹配而丢弃它们
• 需求：显示所有服务器返回的结果

2. 遗留旧结果

• 用户先搜索“Zurich”，再缓慢输入“St Gallen”（中途退格删除之前的内容）
• 结果列表包含Zur、Zuric、Zurich、St、St Ga、St Gallen的相关结果
• 需求：仅显示最近一次服务器查询的结果

3. 理想效果

• 用户输入“Zurich”后，立即显示结果“Zürich”
• 删除“Zurich”并输入完“St Gallen”后，显示结果“St. Gallen”

请问哪些配置选项组合可以实现该行为？

最小可复现示例 #

JavaScript

function search(q, callback) {
  if (q === "Zürich" || q === "Zuerich") {
    callback([{
        'text': 'Zürich',
        'value': 1
      },
      {
        'text': 'Zuerich',
        'value': 2
      }
    ]);
  } else if (q === "St. Gallen" || q === "St Gallen") {
    callback([{
        'text': 'St. Gallen',
        'value': 3
      },
      {
        'text': 'St Gallen',
        'value': 4
      }
    ]);
  } else {
    callback();
  }
}

var settings = {
  load: (q, callback) => this.search(q, callback),
  searchField: []
};
new TomSelect('#tom-select-it', settings);

HTML

<meta charset="UTF-8">
<input id="tom-select-it" />
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

解决方案 #

要实现完全由服务器控制结果展示、不保留旧结果的效果，需调整以下Tom Select配置项：

核心配置组合 #

1. searchField: []：关闭客户端本地搜索过滤，让服务器返回的所有结果直接展示
2. persist: false：禁止将选项持久化到本地存储，避免旧结果残留
3. create: false：禁用用户创建新选项的功能（若无需此功能）
4. 在load回调中清空现有选项：每次新查询前清除当前下拉列表的旧结果，确保只显示最新服务器返回内容

修改后的代码 #

JavaScript

function search(q, callback) {
  if (q === "Zurich" || q === "Zürich" || q === "Zuerich") {
    callback([{
        'text': 'Zürich',
        'value': 1
      },
      {
        'text': 'Zuerich',
        'value': 2
      }
    ]);
  } else if (q === "St. Gallen" || q === "St Gallen") {
    callback([{
        'text': 'St. Gallen',
        'value': 3
      },
      {
        'text': 'St Gallen',
        'value': 4
      }
    ]);
  } else {
    callback([]);
  }
}

var settings = {
  load: function(q, callback) {
    // 清空现有选项，避免旧结果残留
    this.clearOptions();
    search(q, callback);
  },
  searchField: [],
  persist: false,
  create: false
};
new TomSelect('#tom-select-it', settings);

HTML

<meta charset="UTF-8">
<input id="tom-select-it" />
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/js/tom-select.complete.min.js"></script>

关键配置说明 #

• this.clearOptions()：每次发起服务器查询前清空当前选项列表，彻底避免旧结果残留
• searchField: []：完全禁用客户端搜索过滤逻辑，服务器返回的结果直接展示
• persist: false：阻止Tom Select将选项保存到本地存储，避免页面重启时加载旧数据
• create: false：关闭用户自定义添加选项功能，防止无关选项混入结果列表

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