change value of tom select after rendering it

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: "".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**.
            

Via Active questions tagged javascript - Stack Overflow https://ift.tt/MZ3Cbgw