Good day

I’m using this autocomplejs library so intead of loading existing data I’m getting data from an endpint and I pass a query to get a specific data, Everything works but I can’t seem to query on input change and when I check the documentation it has an example but don’t get it or its not complete.

I’m passing a search query on that endpoint
like below

<div wire:ignore x-data="{ value: @entangle($attributes->wire('model')) }" x-init="new autoComplete({
    selector: '#{{ $id }}',
    placeHolder: '{{ $attributes->has('placeholder') ? $attributes->get('placeholder') : 'Please enter your address...' }}',
    data: {
         // I don't know how to call this query on input change so I tried getting the input value like  
        
        src: async (query) => {
            try {
                // const query = document.querySelector('#{{ $id }}').value; and removed the quiry param but its not working still
                const source = await fetch(`/places/autocomplete/${query}`);
                const data = await source.json();
                console.log(JSON.stringify(data));
                return data;
            } catch (error) {
                console.log(JSON.stringify(error));
                return error;
            }
        },
        keys: ['description'],
        cache: true,
    },
    searchEngine: '{{ $attributes->has('searchEngine') ? $attributes->get('searchEngine') : 'loose' }}',
});" x-on:selection="value = $event.target.value"
    class="!w-full relative">
    <input type="search" {{ $attributes->whereDoesntStartWith('wire:model') }} id="{{ $id }}"
        x-bind:value="value"
        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block !w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
        autocomplete="off" tabindex="1">
</div>

@once
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/css/autoComplete.01.min.css">

    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/tarekraafat-autocomplete.js/10.2.7/autoComplete.min.js?id=<?= rand(0, 1000 - 1) ?>"
        data-navigate-track></script>

    <script>
        let autocompletInput = document.getElementById("autoComplete");
        autocompletInput.addEventListener("selection", function(event) {
            const feedback = event.detail;
            const selection = feedback.selection.value[feedback.selection.key];
            autocompletInput.value = selection;
        });
    </script>
@endonce

I saw this from the documentation
The documentation is not explaining further this

but I don’t know how I can pass the query.

I need help with passing that query.

I tried this but the input value is not updating

I also tried listing to change event but no luck

 src: async () => {
            try {
                const query = document.querySelector('#{{ $id }}').value;
                const source = await fetch(`/places/autocomplete/${query}`);
                const data = await source.json();
                console.log(JSON.stringify(data));
                return data;
            } catch (error) {
                console.log(JSON.stringify(error));
                return error;
            }
        },

This is for google places autocomplete.

Thanks in advance.