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.

/

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

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

• javascript
• jquery
• autocomplete
• algolia

Share Improve this question Follow edited Mar 8 at 15:27 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Mar 8 at 12:52 MZHMZH 1,57644 gold badges3030 silver badges5858 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

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: https://jsfiddle/2aLkdpgw/4/

It looks like your Algolia autocomplete setup is displaying the dropdown correctly, but clicking on an item is not triggering the expected event. The onSelect function should be fired when an item from the list is clicked, but in your current implementation, it is not behaving as expected.

One possible issue is that the onSelect function is not inside the correct configuration object within getSources(). In Algolia's autocomplete, event handlers like onSelect should be defined within the source configuration itself rather than the main autocomplete initialization. This ensures that the function is triggered when an item from the specific source is selected.

To fix this, you should move the onSelect handler inside getSources(), ensuring that it is correctly associated with the data source. Here’s how you can modify your code to make sure the selection event fires properly:

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

With this change, the onSelect function is now correctly placed within getSources(), ensuring that it is executed when an item is selected. If you are still facing issues, ensure that there are no JavaScript errors in the console that might be interfering with event handling.