Criando um autocomplete com JavaScript

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.

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.