Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
like image 662
MZH Avatar asked Oct 16 '25 13:10

MZH


1 Answers

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/

like image 150
Neriday Avatar answered Oct 19 '25 04:10

Neriday