Hot to disabled the (not so)intelligent remote load caches in Tom-Select

Question

I need to show different select lists on a tom-select depending on if the search box is empty or not. But tom-select is not calling the load function if you remove all characters in the search box.

To make it a little bit clearer:

When you open the tom-select, the proposed select items should be "A" and "B". You type "A" now in the search box, the load function is called and I change the item list and the proposed items are now "AA" "AB". When you now remove the A with backspace, you should again see the "A" and "B" list, but as tom-select is not calling the load function I cannot replace the list of selects.

Is there any workaround?

Trying to use the answer of XMehdi I tried this code but it does not change a thing

        load: (query, callback) =>
        {
            return new Promise(async (resolve, reject) =>
            {
                const productList = await Util.getDataFromBackend("mainpage/productlist", {term: query}, "POST");
                callback(productList);
                reject();
            });
        },

score 1 · Accepted Answer · edited Jun 25 '23 at 18:38

If I understood your problem correctly, you don't have a problem with some caching. There is simply a setting from TomSelect named allowEmptyOption which should be set to true to allow loading results even if your search box is empty. So before your load function, you should define your setting like this:

const select = new TomSelect('your-selector', {
    //[YOUR SETTINGS],
    allowEmptyOption: true,
    load: (query, callback) => {
        const productList = await Util.getDataFromBackend("mainpage/productlist", {term: query}, "POST");
        callback(productList);
        reject();
    },
    //[YOUR OTHER EVENTS/FUNCTIONS]
});

Hot to disabled the (not so)intelligent remote load caches in Tom-Select

1 Answers1