Implementar Sugestões de Pesquisa com Vue.js

Introdução

Neste projeto, você aprenderá como implementar um recurso de sugestões de pesquisa de entrada usando Vue.js 2.x. Este recurso é comumente usado em aplicações web para fornecer aos usuários uma lista de dados correspondentes à medida que eles digitam na entrada de pesquisa.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como capitalizar a primeira letra dos cabeçalhos da tabela de dados
• Como implementar a funcionalidade de sugestões de pesquisa com base na entrada do usuário

🏆 Conquistas

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

• Manipular o DOM usando diretivas Vue.js como v-for e v-model
• Criar propriedades computadas em Vue.js para filtrar e exibir os resultados da pesquisa
• Aplicar estilo básico à tabela e à entrada de pesquisa

Configurar a Estrutura do Projeto

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

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

├── index.html
└── js
    └── vue.js

Dentre eles:

• js/vue.js é o arquivo Vue 2.x.
• index.html é o código de layout da página e a lógica de implementação funcional.

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

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

A função de sugestão de pesquisa ainda não foi implementada.

Capitalizar os Cabeçalhos da Tabela

Nesta etapa, você aprenderá como capitalizar a primeira letra dos cabeçalhos da tabela de dados.

1. Abra o arquivo index.html no seu editor de código.
2. Localize a seção de cabeçalho da tabela no código HTML:

<thead>
  <tr>
    <td v-for="col in columns">
      {{col.slice(0,1).toUpperCase() + col.slice(1)}}
    </td>
  </tr>
</thead>

3. A diretiva v-for é usada para iterar sobre o array columns e exibir os cabeçalhos da tabela correspondentes. O código {{col.slice(0,1).toUpperCase() + col.slice(1)}} é usado para capitalizar a primeira letra de cada nome de coluna.

   • col.slice(0,1) extrai o primeiro caractere do nome da coluna.
   • .toUpperCase() converte o primeiro caractere para maiúsculo.
   • + col.slice(1) concatena o primeiro caractere capitalizado com o restante do nome da coluna.

4. Salve o arquivo index.html e atualize a página. Agora você deve ver os cabeçalhos da tabela com a primeira letra capitalizada.

Implementar Sugestões de Pesquisa

Nesta etapa, você aprenderá como implementar a funcionalidade de sugestões de pesquisa.

1. No arquivo index.html, encontre o campo de entrada de pesquisa e o código Vue.js correspondente, e adicione parte do código da seguinte forma:

<span>Pesquisar por nomes: </span>
<!-- Adicionar código v-model -->
<input placeholder="Digite o nome para pesquisar" v-model="searchQuery" />

data: {
  searchQuery: "",
  // ... outras propriedades de dados
},

// O código a seguir é o código que precisa ser adicionado
computed: {
  newData() {
    return this.data.filter((item) => {
      return item.name
        .toLowerCase()
        .includes(this.searchQuery.toLowerCase());
    });
  }
}

2. A propriedade de dados searchQuery está vinculada à entrada de pesquisa usando a diretiva v-model. Isso permite que a instância Vue.js rastreie a entrada do usuário.
3. A propriedade computada newData filtra o array data com base no valor de searchQuery. Ele verifica se a propriedade name de cada item de dados inclui a consulta de pesquisa (sem distinção entre maiúsculas e minúsculas).
4. Os dados filtrados são então exibidos no corpo da tabela:

<tbody>
  <tr v-for="entry in newData">
    <td v-for="col in columns">{{entry[col]}}</td>
  </tr>
</tbody>

5. A diretiva v-for é usada para iterar sobre o array newData e exibir cada item de dados em uma linha da tabela.
6. Salve o arquivo index.html e atualize a página. Agora você deve ser capaz de ver a funcionalidade de sugestões de pesquisa funcionando conforme o esperado.

Agora, você concluiu a implementação do recurso de sugestões de pesquisa de entrada no projeto Vue.js fornecido. O resultado final é o seguinte:

Resumo

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