Algolia Autocomplete选择列表点击无响应问题求助

1. 为列表项添加value字段 #

Algolia Autocomplete要求每个列表项必须包含value属性，组件依赖这个字段识别并处理选中事件。修改getItems返回的数组：

return [
    { label: 'Apple', Id: '123', value: 'Apple' },
    { label: 'Mango', Id: '456', value: 'Mango' },
    { label: 'Banana', Id: '789', value: 'Banana' },
    { label: 'Orange', Id: '101', value: 'Orange' }
].filter(item => item.label.toLowerCase().includes(query.toLowerCase()));

2. 修正onSelect的参数结构 #

全局onSelect的回调参数是一个包含item、state等属性的对象，而非直接传入item。调整函数定义：

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

完整修复后代码 #

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', value: 'Apple' },
                        { label: 'Mango', Id: '456', value: 'Mango' },
                        { label: 'Banana', Id: '789', value: 'Banana' },
                        { label: 'Orange', Id: '101', value: 'Orange' }
                    ].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);

关键原因说明 #

• 缺少value字段：组件无法识别列表项的唯一标识，点击时无法触发选中逻辑。
• onSelect参数错误：回调函数接收的是包含item的对象，参数不匹配会导致函数执行失败（控制台可查看未捕获错误）。

内容的提问来源于stack exchange，提问作者MZH