How to pass a search query

[raliqala]

Good day

I'm trying to search data from an endpoint but 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: {
        src: async (query) => {
            try {
                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

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

 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;
            }
        },

I'm doing this for google places autocomplete.

[raliqala]

turns out i was just suppose to set cache: false,