Criando um autocomplete com JavaScript

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

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.

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.

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.

Nosso código completo ficou assim:

Ó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:

Primeiro temos que capturar os seletores do campo:

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

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.

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

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.

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.