Algolia Autocomplete Select List Event

I am trying to use algolia autocomplete, the list appears fine but when we click on it, no event fires, the keyword scroll is also working but the section on the list is not.

https://jsfiddle.net/qeLwbfpj/

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);

The issue is that in your code, the onSelect() method is not attached to the data source in getSources(). Because of this, Algolia doesn't know which function to call when an item is selected.

onSelect() is located outside of getSources(), so the autocomplete does not have access to it and cannot trigger it when an item is clicked.

You just need to move the onSelect method inside getSources() at the same nesting level as getItems() and templates(). This will allow Algolia to properly handle item selection.

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(`Selected item:`, item);
                    alert(`You selected: ${item.label} (ID: ${item.Id})`);
                }
            }
        ];
    },

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

    }
});

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

Here is the implementation on jsfiddle.net: https://jsfiddle.net/2aLkdpgw/4/