Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Filtar com JS usando mais de uma palavra de forma combinada.

Boa noite ! Gostaria de saber se é possível filtrar a tabela usando como busca a combinação de mais de uma palavra. Ou seja, o usuário digita no campo de busca: "ventilador teto" e o filtro traz apenas as linhas da tabela que contenham as duas palavras exclusivamente. Isso com javascript apenas. Se alguém tiver algum exemplo ajuda muito. Grato.

3 respostas
solução!

Boa noite, José! Como vai?

É possível sim! Segue um código de exemplo:

Exemplo Prático 1:

let busca = 'ventilador teto';
let termos = busca.split(' ');
let frases = ['meu novo ventilador de teto', 'meu novo ventilador', 'meu novo teto', 'minha nova televisão'];
let frasesFiltradas = [];

for (let frase of frases) {
     let termosEncontrados = true;
     for (let termoBuscado of termos) {
          if (!frase.includes(termoBuscado)) {
               termosEncontrados = false;
               break;
          }
     }

     if (termosEncontrados) {
          frasesFiltradas.push(frase);
     }
}

console.log(frasesFiltradas);

O código varre o vetor de frases procurando em cada uma delas ocorrências de cada um dos termos buscados. Todas as frases que contiverem todos os termos buscados são adicionadas no vetor de frases filtradas.

Tbm é possível fazer a mesma coisa de um jeito mais funcional e com menos linhas. Pra isso vc terá que ter familiaridade e utilizar as funções filter() e reduce() do JavaScript! Se não tem familiaridade com elas, indico vc a fazer esses cursos mais avançados de JavaScript!

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-1

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-2

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-3

Exemplo prático 2:

let busca = 'ventilador teto';
let termos = busca.split(' ');
let frases = ['meu novo ventilador de teto', 'meu novo ventilador', 'meu novo teto', 'minha nova televisão'];

let frasesFiltradas = frases.filter(frase => {
     return termos.reduce( (resultadoAnterior, termoBuscado) => {
          return resultadoAnterior && frase.includes(termoBuscado);
     }, true);
});

// forma mais sucinta
// let frasesFiltradas = frases.filter(frase => 
//     termos.reduce( (resultadoAnterior, termoBuscado) => 
//         resultadoAnterior && frase.includes(termoBuscado), true));

console.log(frasesFiltradas);

Por alto, o filter() filtra uma lista de acordo com uma condição (nesse caso a condição é que a frase tenha os termos buscados). O reduce() é um acumulador, ou seja, ele vai acumulando o resultado anterior com o próximo resultado de uma operação qualquer (no caso a operação é um AND).

Claro que esse problema que vc levantou é mto mais complexo e minha implementação é básica, apenas para fins didáticos!

Para saber mais:

Sobre o filter():

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/filtro

https://www.w3schools.com/jsref/jsref_filter.asp

Sobre o reduce():

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

https://www.w3schools.com/jsref/jsref_reduce.asp

Qualquer dúvida é só falar!

Grande abraço e bons estudos!

Muito obrigado pela resposta e principalmente pela qualidade dela. Um abraço.

Por nada, José! Sempre que tiver qualquer dúvida é só mandar aqui no fórum!

Grande abraço e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software