Construindo uma Funcionalidade de Pesquisa Simples

Introdução

Neste projeto, você aprenderá como usar JavaScript para implementar uma funcionalidade de pesquisa simples. Você aprenderá como associar o evento input a uma caixa de entrada, processar os dados de pesquisa e exibir os resultados da pesquisa.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como associar o evento input a uma caixa de entrada
• Como implementar o método handleInput para filtrar os dados de pesquisa
• Como renderizar os resultados da pesquisa em uma lista

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Usar o método addEventListener para associar eventos
• Usar o método filter para filtrar um array com base em uma condição
• Manipular o DOM para atualizar os resultados da pesquisa

Configurar a Estrutura do Projeto

Nesta etapa, você configurará os arquivos e a estrutura do projeto. Siga as etapas abaixo para concluir esta etapa:

Abra a pasta do projeto. A estrutura do diretório é a seguinte:

├── css
│   └── style.css
├── index.html
└── js
    └── index.js

Onde:

• index.html é a página principal.
• css é a pasta para armazenar os estilos do projeto.
• js/index.js é o arquivo JavaScript onde você precisa adicionar código.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" na parte superior da VM e atualize-o manualmente para ver a página.

Renderizar os Resultados da Pesquisa

Nesta etapa, você implementará o método render para exibir os resultados da pesquisa.

1. No arquivo js/index.js, localize o método render no objeto search.
2. Dentro do método render, adicione o seguinte código para gerar o template HTML para os resultados da pesquisa e atualizar o elemento listEl:

const template = this.data.reduce(
  (prev, next) => prev + `<li>${next.content}</li>`,
  ""
);
this.listEl.innerHTML = template;

O método reduce é usado para criar uma string de template HTML que exibe a propriedade content de cada item no array data.

Implementar o Método handleInput

Nesta etapa, você implementará o método handleInput para processar a funcionalidade de pesquisa.

1. No arquivo js/index.js, localize o método handleInput no objeto search.
2. Dentro do método handleInput, adicione o seguinte código para filtrar o array data com base no valor de entrada e, em seguida, renderizar os resultados da pesquisa:

const value = e.target.value;
// Use timer to simulate ajax send request, data receive data
setTimeout(() => {
  this.data = !!value
    ? data.filter((val) => val.content.indexOf(value) !== -1)
    : [];
  this.render();
});

A função setTimeout é usada para simular uma operação assíncrona, como uma requisição AJAX, para receber os dados da pesquisa.

Vincular o Evento de Input

Nesta etapa, você aprenderá como vincular o evento input à caixa de entrada e chamar o método handleInput quando o valor da caixa de entrada mudar.

1. Abra o arquivo js/index.js.
2. Localize a função handle no objeto search.
3. Dentro da função handle, adicione o seguinte código para vincular o evento input ao elemento inputEl e chamar o método handleInput:

this.inputEl.addEventListener("input", this.handleInput.bind(this));

A parte bind(this) é importante para garantir que o this dentro do método handleInput se refira ao próprio objeto search.

Após concluir estas quatro etapas, o arquivo js/index.js deverá ter a implementação completa da funcionalidade de pesquisa, e o projeto deverá funcionar conforme o esperado. O efeito final deve ser o seguinte:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.