autoComplete.js with livewire and alpinejs

[raliqala]

Good day

This is my component for google places autocomplete

@props(['id' => 'autoComplete', 'eventName' => 'addressSelected'])

@if ($attributes->has('label'))
    <label for="input-group-1"
        class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-900">{{ $attributes->get('label') }}</label>
@endif

<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(`/myendpoint/${query}`);
                const data = await source.json();
                return data;
            } catch (error) {
                console.log(JSON.stringify(error));
                return error;
            }
        },
        keys: ['description'],
        cache: false,
    },
    searchEngine: '{{ $attributes->has('searchEngine') ? $attributes->get('searchEngine') : 'loose' }}',
    debounce: 500,
    threshold: 3,
});" 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/autocomplete.js@10.2.7/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;

            // you can do whatever here, for me for now this is it
            if ('{{ $eventName }}'.length) {
                Livewire.dispatch('{{ $eventName }}', {
                    data: {
                        desc: selection,
                        placeId: feedback.selection.value.id
                    }
                });
            }
        });
    </script>
@endonce

Then you use it like so

<x-input.autocomplete wire:model="search_address" />