主页 / coding / 问题 / 79494409
Accepted
MZH
Asked: 2025-03-08 20:52:49 +0800 CST

Algolia 自动完成选择列表事件

  • 772

我正在尝试使用 algolia 自动完成功能，列表显示正常，但是当我们单击它时，没有触发任何事件，关键字滚动也有效，但列表上的部分无效。

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

2 个回答

  1. Best Answer

    问题是，在您的代码中，该onSelect()方法未附加到 中的数据源getSources()。因此，Algolia 不知道在选择某个项目时要调用哪个函数。

    onSelect()位于 之外getSources()，因此自动完成功能无法访问它，也无法在单击项目时触发它。

    您只需将 onSelect 方法移至与和getSources()相同的嵌套级别即可。这将允许 Algolia 正确处理项目选择。getItems()templates()

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

    这是 jsfiddle.net 上的实现： https://jsfiddle.net/2aLkdpgw/4/

    • 2

  2. 看起来您的 Algolia 自动完成设置正确显示了下拉列表，但单击某个项目并未触发预期事件。单击列表中的某个项目时应触发 onSelect 函数，但在您当前的实现中，它的行为不符合预期。

    一个可能的问题是 onSelect 函数不在 getSources() 中的正确配置对象内。在 Algolia 的自动完成功能中，事件处理程序（如 onSelect）应在源配置本身中定义，而不是在主自动完成初始化中定义。这可确保在选择特定源中的项目时触发该函数。

    要解决此问题，您应该将 onSelect 处理程序移到 getSources() 内，确保它与数据源正确关联。您可以按照以下方法修改代码，以确保选择事件正确触发：

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

    经过此更改，onSelect 函数现在已正确放置在 getSources() 中，确保在选择项目时执行该函数。如果您仍然遇到问题，请确保控制台中没有可能干扰事件处理的 JavaScript 错误。

    • 1

相关问题