How to clear existing (dynamically created) instances of Tom-Select

[joleenshook]

I am creating all my instances of Tom-Select dynamically when the page loads based on a specific class, they're not assigned to variables. I want to do a clear() on all of them when a reset button is clicked. Does this .selectize() functionality work with Tom-select as it does in selectize?

var $select = $('#optionNetFlow').selectize();
var control = $select[0].selectize;
control.clear();

just using native javascript querySelectorAll to grab the list and run through and clear them?

I'm not a javascript expert, so please be kind if this is a dumb question.

[oyejorge]

Can you show us what you've got so far with your Tom Select code?

[joleenshook]

I'm using this for most of my select boxes and tagging in a Laravel/Livewire/AlpineJS/TailwindCSS app.
The Javascript side of things:

let token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
selectEls = document.querySelectorAll('select.fancy-select');
selectEls.forEach(el => fancySelect(el));
selectEls = document.querySelectorAll('select.fancy-select-ro');
selectEls.forEach(el => fancySelectRo(el));
tagEls = document.querySelectorAll('select.fancy-tag');
tagEls.forEach(el => fancyTag(el));
tagEls = document.querySelectorAll('select.fancy-tag-ro');
tagEls.forEach(el => fancyTagRo(el));


function fancySelectRo(el) {
    new TomSelect('#' + el.getAttribute('id'), {
        plugins: {
            remove_button: {
                title: 'Remove this item',
            }
        },
        create: false,
    });
}

function fancySelect(el) {
    new TomSelect('#' + el.getAttribute('id'), {
        plugins: {
            remove_button: {
                title: 'Remove this item',
            }
        },
        create: function (input, callback) {
            let dd_model = el.getAttribute('model');
            fetch("/dd", {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json, text-plain, */*",
                    "X-CSRF-TOKEN": token,
                },
                method: "POST",
                body: JSON.stringify({
                    model: dd_model,
                    name: input,
                })
            })
                .then(response => response.json())
                .then(data => {
                    callback({value: data.id, text: data.name})
                })
                .catch(error => console.error(error));
        },
    });
}

function fancyTagRo(el) {
    console.log(el)
    new TomSelect('#' + el.getAttribute('id'), {
        plugins: {
            remove_button: {
                title: 'Remove this item',
            }
        },
        create: false,
    });
}

function fancyTag(el) {
    console.log(el)
    new TomSelect('#' + el.getAttribute('id'), {
        plugins: {
            remove_button: {
                title: 'Remove this item',
            }
        },
        create: function (input, callback) {
            fetch("/tag-add", {
                headers: {
                    "Content-Type": "application/json",
                    "Accept": "application/json, text-plain, */*",
                    "X-CSRF-TOKEN": token,
                },
                method: "POST",
                body: JSON.stringify({
                    vocabulary: el.getAttribute('vocabulary'),
                    name: input,
                })
            })
                .then(response => response.json())
                .then(data => {
                    callback({value: data.id, text: data.name})
                })
                .catch(error => console.error(error));
        },
    });
}

The fields in the php blade file are set up like this:

                <div class="col-span-12 lg:col-span-6 xl:col-span-3">
                    <div class="mr-5 space-y-1">
                        <div wire:ignore class="">
                            <x-search-select wire:model="last_run_by" id="last_run_by" name="last_run_by" label="Last Run By"
                                             class="fancy-select-ro">
                            <option value="">-- All --</option>
                            @foreach($users as $user)
                                <option value="{{$user->id}}">{{$user->name}}</option>
                            @endforeach
                            </x-search-select>
                        </div>

                        <div wire:ignore class="">
                            <x-search-select wire:model="fix_bin_loc_id" id="fix_bin_loc_id" name="fix_bin_loc_id" label="Fixture Location"
                            class="fancy-select-ro">
                            <option value="">-- All --</option>
                            @foreach($fixture_locations  as $fixture_location)
                                <option value="{{$fixture_location->id}}">{{$fixture_location->name}}</option>
                            @endforeach
                            </x-search-select>
                        </div>
                    </div>
                </div>

Everything works fine except that the fields aren't clearing out, even though I'm clearing them in PHP, and the search results act as though they've been cleared the text remains in the tom-select box. The hidden dropdown has an empty value, as it should.

So I'm thinking that something isn't making the trip back to notify it that the field has cleared, and I might have to have it listen for an event and clear the fields myself.... can I? I know the clear function is there, I just don't know how to access it if I didn't initially declare it with

var varname = new TomSelect('#myelement',config);

[oyejorge]

Couple of things:

• Instead of new TomSelect('#' + el.getAttribute('id'),...) do this new TomSelect(el, ...)
• Later you can do el.tomselect.clear()
• document.querySelectorAll('.tomselected') will get you all elements

[joleenshook]

Thank you very much, I'll try that out.