Início / coding / Perguntas / 79494409
Accepted
MZH
Asked: 2025-03-08 20:52:49 +0800 CST

Evento de seleção de lista de preenchimento automático Algolia

  • 772

Estou tentando usar o preenchimento automático do Algolia, a lista aparece bem, mas quando clicamos nela, nenhum evento é disparado, a rolagem de palavras-chave também está funcionando, mas a seção na lista não.

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 respostas

  1. Best Answer

    O problema é que no seu código, o onSelect()método não está anexado à fonte de dados em getSources(). Por causa disso, o Algolia não sabe qual função chamar quando um item é selecionado.

    onSelect()está localizado fora de getSources(), então o preenchimento automático não tem acesso a ele e não pode acioná-lo quando um item é clicado.

    Você só precisa mover o método onSelect para dentro getSources()no mesmo nível de aninhamento que getItems()e templates(). Isso permitirá que o Algolia manipule adequadamente a seleção de itens.

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

    Aqui está a implementação em jsfiddle.net: https://jsfiddle.net/2aLkdpgw/4/

    • 2

  2. Parece que sua configuração de preenchimento automático do Algolia está exibindo o menu suspenso corretamente, mas clicar em um item não está acionando o evento esperado. A função onSelect deveria ser acionada quando um item da lista é clicado, mas em sua implementação atual, ela não está se comportando como esperado.

    Um possível problema é que a função onSelect não está dentro do objeto de configuração correto dentro de getSources(). No autocomplete do Algolia, manipuladores de eventos como onSelect devem ser definidos dentro da própria configuração de origem em vez da inicialização principal do autocomplete. Isso garante que a função seja acionada quando um item da origem específica for selecionado.

    Para corrigir isso, você deve mover o manipulador onSelect para dentro de getSources(), garantindo que ele esteja corretamente associado à fonte de dados. Veja como você pode modificar seu código para garantir que o evento de seleção seja disparado corretamente:

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

    Com essa alteração, a função onSelect agora está corretamente posicionada dentro de getSources(), garantindo que ela seja executada quando um item for selecionado. Se você ainda estiver enfrentando problemas, garanta que não haja erros de JavaScript no console que possam estar interferindo no tratamento de eventos.

    • 1

relate perguntas