Criando um autocomplete com JavaScript

Criando um autocomplete com JavaScript
Felipe Nascimento
Felipe Nascimento

Compartilhe

Mais conhecida como autocomplete, ela não só vai evitar erros de digitação, mas também promover outros destinos de acordo com o que o cliente digitar no campo de busca.

Como podemos utilizar o JavaScript para nos auxiliar nessa tarefa?

Começando o autocomplete

Atualmente os nomes das cidades que a agência oferece os pacotes estão armazenadas no seguinte array:

const destino = ['Salvador', 'Vitória', 'Maceió', 'Ceará','Rio Branco','Macapá', 'Porto Velho', 'Olinda', 'Aracaju', 'Capitólio','São Paulo', 'Paraty'];

A primeira coisa que vamos fazer é criar uma função para o autocomplete que vai receber o destino como parâmetro e retornar para os usuários as opções.

function autoComplete(cidade) {
  const destino = ['Salvador', 'Vitória', 'Maceió', 'Ceará','Rio Branco','Macapá', 'Porto Velho', 'Olinda', 'Aracaju','Capitólio','São Paulo', 'Paraty'];
  return destino;
}

Uma das vantagens do autocomplete é digitar uma ou duas letras e já receber algum resultado. Então temos que encontrar uma maneira de pegar a quantidade de letras que forem digitadas e verificar se existe alguma cidade que corresponde a essas letras e retornar os resultados para o usuário.

Banner promocional da Alura, com um design futurista em tons de azul, apresentando dois blocos de texto, no qual o bloco esquerdo tem os dizeres:

Filtrando o array

Para evitar de encontrar divergências entre o que o usuário digita e o nome das cidades no array, precisamos padronizar o input do usuário para comparar com o nome da cidade de forma mais assertiva. Para isso, vamos colocar todas as letras digitadas em minúsculo usando o método toLowerCase.

Quando fizermos a comparação,precisamos retornar uma nova lista, onde somente os dados que baterem com o que o usuário digitou devem estar presentes, para nos ajudar a filtrar iterando por todo o array.

return destino.filter((valor) => {
  const valorMinusculo = valor.toLowerCase()
  const cidadeMinusculo = valor.toLowerCase()
  })
}

Agora que já temos todas as cidade em minúsculo, para fazer a comparação e retornar a nova lista no filter vamos usar o método includes. Ele vai dizer se a string que digitamos, seja ela uma letra ou o nome todo da cidade, está na variável valorMinusculo. Caso a resposta seja verdadeira, retornamos essa string para o usuário.

return valorMinusculo.includes(cidadeMinusculo)

Nosso código completo ficou assim:

function autoComplete(cidade) {
const destino = ['Salvador', 'Vitória', 'Maceió', 'Ceará','Rio Branco','Macapá', 'Porto Velho', 'Olinda','Aracaju','Capitólio','São Paulo', 'Paraty'];

      return destino.filter((valor) => {
          const valorMinusculo = valor.toLowerCase()
          const cidadeMinusculo = cidade.toLowerCase()

             return valorMinusculo.includes(cidadeMinusculo)
          })
   }

Ótimo! O autocomplete foi criado, agora vamos exibir o resultado para o usuário =)

Exibindo o resultado para o usuário

Temos dois campos no nosso HTML, um campo para o usuário digitar o destino e uma <ul> que vamos usar para exibir os resultados:

  <input class="campo" type="text">
  <ul class="sugestoes"></ul>

Primeiro temos que capturar os seletores do campo:

const campo = document.querySelector('.campo')
const sugestoes = document.querySelector('.sugestoes')

Agora é só adicionar um evento ao campo de busca para quando o usuário digitar já trazer o nome das cidades automaticamente.

campo.addEventListener('input', ({ target }) => {
const dadosDoCampo = target.value

Como a variável dadosDoCampo está recebendo o que está sendo digitado, criamos uma condição: caso a string capturada pelo evento seja verdadeira colocamos o resultado dentro do campo sugestoes com a ajuda do innerHTML.

A função autoComplete, nos retorna sempre um array. Precisamos gerar uma lista de elementos baseada na lista de sugestões, para "mapear" a lista de sugestões para elementos, vamos usar a função map que vai ser responsável por iterar pelos resultados e vai criar li com a resposta, não esquecendo de usar o join para devolver o resultado como string.

if(dadosDoCampo.length) {
    const autoCompleteValores = autoComplete(dadosDoCampo)
     sugestoes.innerHTML = `
       ${autoCompleteValores.map((value) => {
           return (
                  `<li>${value}</li>`
                 )
         }).join('')}
    `}
})

O nosso código agora com o evento ficou assim:

function autoComplete(cidade) {

const destino = ['Salvador', 'Vitória', 'Maceió', 'Ceará','Rio Branco','Macapá', 'Porto Velho', 'Olinda','Aracaju','Capitólio','São Paulo', 'Paraty'];
        return destino.filter((valor) => {
                const valorMinusculo = valor.toLowerCase()
                const cidadeMinusculo = cidade.toLowerCase()

                return valorMinusculo.includes(cidadeMinusculo)
          })
   }
  const campo = document.querySelector('.campo')
  const sugestoes = document.querySelector('.sugestoes')

  campo.addEventListener('input', ({ target }) => {
      const dadosDoCampo = target.value
      if(dadosDoCampo.length) {
         const autoCompleteValores = autoComplete(dadosDoCampo)
         sugestoes.innerHTML = `
            ${autoCompleteValores.map((value) => {
                return (
                   `<li>${value}</li>`
                        )
             }).join('')}
           `
       }
})

Para saber mais

Uma outra maneira de fazer um rápido autocomplete é através das propriedades do HTML5 como datalist que vai representar um conjunto de elementos e a option value que representa um item.

<label for="busca">Buscar países</label>
<input type="search" id="busca" list="paises">

<datalist id="destino">
  <option value="Salvador"></option>
  <option value="Vitória"></option>
  <option value="Maceió"></option>
  <option value="Ceará"></option>  
  <option value="Rio Branco"></option>  
  <option value="Macapa"></option>  
  <option value="Olinda"></option>
  <option value="Aracaju"></option>
  <option value="Capitólio"></option>
  <option value="São Paulo"></option>
  <option value="Paraty"></option>
</datalist>

Se ficou interessado em como o Javascript funciona e como você pode utilizá-lo melhor, aqui na Alura temos uma formação engenheiro front-end. Nela, você verá como programar em Javascript, utilizar expressões regulares, dentre outras muitas coisas.

Felipe Nascimento
Felipe Nascimento

Desenvolvedor e instrutor na Alura com foco em JavaScript.

Veja outros artigos sobre Front-end