change value of tom select after rendering it

Question

I'm working on an update function that uses tom-select (https://tom-select.js.org/).

The process goes as follows: 1- the user clicks on the edit button 2- a bootstrap modal will open and the data of the selected row will show so he can update them.

the problem: after rendering the selector I want to change it's value to select the value of the selected item, I tried this code: $('#select-beast-update').val(response.data.book.author_id).change()

but it's not working, then I tried using the onInitialize:function() -refer to this link at the callbacks section to get more details https://tom-select.js.org/docs/ - and it also did not work.

this is my AJAX function :

            $.ajax({
                url: "{{ route('books.edit',['%book%']) }}".replace('%book%',id),
                type: "GET",
                success: (response)=>{

                    $('#book-id-update').val(response.data.book.id)
                    $('#book-name-update').val(response.data.book.name)
                    // $('#book-pdf-update').val(response.data.book.pdf_file)
                    // $('#book-mobi-update').val(response.data.book.mobi_file)

                    let authors = response.data.authors.map(item => {
                        return {
                            value: item.id,
                            text: item.name
                        };
                    });

                    var input = document.getElementById('select-beast-update');
                    new TomSelect(input,{
                        create: true,
                        plugins: ['change_listener'],
                        sortField: {
                            field: "text",
                            direction: "asc"
                        },
                        options:authors,
                    })

                    input.value = response.data.book.author_id;
                    var evt = document.createEvent('HTMLEvents');
                    evt.initEvent('change', false, true);
                    input.dispatchEvent(evt);

                    $('#select-beast-update').attr('name','author_id')
                },
                error: (e)=>{
                    Swal.fire('Error','Please Try Again Later','error' )
                }
            }).done(function(){
                $('#edit_book_modal').modal('show')
            }); ```
note: I'm using Laravel as my backend and vanilla JS and bootstrap along with the tom-select. I'm also open to changing tom-select and using other libraries that implement search in its options **other than select 2**.
            

Answer 1

Why not initialize TomSelect with the selected value?

new TomSelect(input,{
    create: true,
    plugins: ['change_listener'],
    sortField: {
        field: "text",
        direction: "asc"
    },
    options:authors,
    items:[response.data.book.author_id]
})

Answer 2

Instead of doing it like this:

$('#select-beast-update').val(response.data.book.author_id).change()

You can set your initialized TomSelect to a variable, eg:

let tomSelect = new TomSelect("#select-beast-update",{
                    create: true,
                    plugins: ['change_listener'],
                    sortField: {
                        field: "text",
                        direction: "asc"
                    },
                    options:authors,
                });

And then:

tomSelect.setValue(response.data.book.author_id);

Answer 3

I was struggling with the same problem and discovered that the element you initialized TomSelect with gets a .tomselect object assigned to it.

Example:

Let's say you have an input#tom-select element and you have already initialized it:

const tomSelect = new TomSelect('select#tom-select', {...})

You can change the value for this select#tom-select element later by using the setValue function.

tomSelect.setValue("1")

Note

This assumes that the TomSelect instance already had the options loaded.