JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-theme-classic@1.12.2/dist/theme.min.css">
<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-js"></script>

<h2>Algolia Autocomplete</h2>

<div class="autocomplete-wrapper">
    <div id="autocomplete"></div>
</div>

CSS

body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .autocomplete-wrapper {
            position: relative;
        }
        .aa-Panel {
            z-index: 99999 !important; /* Ensure panel is on top */
        }

JavaScript

const { autocomplete } = window['@algolia/autocomplete-js'];

var ac_instance = autocomplete({
    insights: true,
    container: '#autocomplete',
    placeholder: 'Type a name...',
    openOnFocus: true,

    getSources({ query }) {
        return [
            {
                sourceId: 'dummy-source',
                getItems() {
                    return [
                        { label: 'Apple', Id: '123' },
                        { label: 'Mango', Id: '456' },
                        { label: 'Banana', Id: '789' },
                        { label: 'Orange', Id: '101' }
                    ].filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
                },
                templates: {
                    item({ item }) {
                        return item.label;
                    }
                }
            }
        ];
    },

    onSelect(item ) {
        console.log(`File: dummy.php, Line: 62`, item);
        alert(`File: dummy.php, Line: 63`);
    },

    onSubmit(state) {
        alert(`File: dummy.php, Line: 67`);

    }
});

console.log(`File: dummy.php, Line: 79`, ac_instance);