如何禁用Tom-Select远程加载缓存？解决搜索框清空时load函数未触发问题

核心问题原因 #

Tom-Select默认minLength配置为1，仅当搜索字符长度≥1时才会触发load函数，清空搜索框时（query为空字符串）不会自动调用load，导致无法切换回初始选项列表。

可行解决方案 #

方案1：修改配置允许空查询触发load #

直接设置minLength: 0，让空查询也能触发load函数，后端根据空的term参数返回初始选项列表（即"A""B"）。

代码示例：

const tomSelect = new TomSelect('#your-select-id', {
    minLength: 0, // 关键配置：允许空查询触发load
    load: (query, callback) => {
        // 直接处理异步请求，无需额外Promise包裹
        Util.getDataFromBackend("mainpage/productlist", {term: query}, "POST")
            .then(productList => {
                callback(productList);
            })
            .catch(() => {
                callback([]); // 异常时返回空列表避免报错
            });
    },
    // 其他必要配置（如valueField、labelField等）
});

方案2：手动监听输入事件触发load #

如果不想修改minLength，可以通过监听搜索框的输入事件，在内容为空时手动调用load函数更新选项。

代码示例：

const tomSelect = new TomSelect('#your-select-id', {
    load: (query, callback) => {
        Util.getDataFromBackend("mainpage/productlist", {term: query}, "POST")
            .then(productList => {
                callback(productList);
            })
            .catch(() => {
                callback([]);
            });
    },
    // 其他必要配置
});

// 获取Tom-Select内部的搜索输入框
const searchInput = tomSelect.control.querySelector('input');
searchInput.addEventListener('input', () => {
    if (searchInput.value.trim() === '') {
        // 手动触发load，传入空查询并更新选项
        tomSelect.load('', (data) => {
            tomSelect.clearOptions();
            tomSelect.addOptions(data);
        });
    }
});

原代码无效的原因 #

1. 未设置minLength: 0，空查询无法触发load；
2. 用Promise包裹load逻辑并调用reject()，可能干扰Tom-Select的内部回调处理，load函数无需返回Promise，直接处理异步请求即可。

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