1

Bem, estou trabalhando com uma tabela com um pouco mais de 60.000 registros e surgiu uma situação em que, através de um input o usuário pode persquisar algum texto que contém em um registro. Inicialmente o usuário apenas digitava o texto a ser buscado e pressionava o botão buscar para assim realizar o filtro, mas agora surgiu uma necessidade de, enquanto o usuário digita aparecer uma lista prévia com 10 resultados referentes ao texto que ele digitou no input.

Imagino que ir fazendo a consulta enquanto o usuário digita não seria também uma alternativa viável, uma vez que, vai gerar uma grande quantidade de requisições sobrecarregando o servidor.

Em algumas situações que prcisei fazer isso com uma tabela menor, eu simplesmente já trazia essa lista pronta como um array e já ia filtrando através desse array para mostrar essa prévia de resultado para o usuário, mas com essa base maior eu já não sei se seria viável essa solução.

Explicado o contexto, existe alguma "solução pronta" para casos como esse?

Estou utilizando banco de dados MySQL, php com o framework lumen como backend, ReactJS no front e fazendo requisições via axios.

2
  • Se for usar o meu código, atenção que eu havia cometido um erro. Atualizei agora. Esqueci de dizer, mas tem várias bibliotecas que implementam isso, se quiser pode pegar uma implementação pronta.
    – bfavaretto
    Commented 23/03/2019 às 14:06
  • @bfavaretto Queria ter mais uma ideia de como é feito isso sem pesar o servidor mesmo, acabei achando algumas bibliotecas para atender essa situação, mas vou acabar implementando uma eu mesmo. Obrigado pelo esclarecimento! :)
    – JrD
    Commented 23/03/2019 às 15:08

1 Resposta 1

1

Nesses casos, o que se faz é limitar a quantidade de requisições ao servidor. A técnica tradicional para isso é o debouncing dos eventos de keyup do browser no input de busca. Em vez de enviar uma nova requisição a cada keyup (que seria um desperdício de recursos tanto no servidor quanto no browser), você envia somente no último keyup da sequência.

Para implementar isso, você agenda o envio da requisição para um futuro próximo, por exemplo 500ms. Se antes desse tempo o evento ocorrer novamente, você substitui esse agendamento por uma nova requisição baseada no novo evento.

Exemplo de implementação:

const intervalo = 500;
let timer, anterior;

function trataKeyup(e) {
    const agora = Date.now();
    if(agora - anterior < intervalo) {
        // Anula agendamento anterior
        clearTimeout(timer);
    }
    // Agenda nova requisição
    const val = e.target.value;
    timer = setTimeout( geraBuscaPor(val), intervalo );
    anterior = agora;    
}

function geraBuscaPor(valor) {
    return function() {
        axios.get('/?q=' + encodeURIComponent(valor)); 
    }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .