Dê o próximo passo e inicie sua carreira
Dê o próximo passo e inicie sua carreira agora mesmo
5 minutos de leitura
Autor(a)
Desenvolvedor e instrutor na Alura com foco em JavaScript.
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
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?
Next.js: criando aplicações fullstack
Ler mais
Hoisting no Javascript
Ler mais
Typescript: aprimore aplicações com tipagem estática
Ler mais
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.
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 =)
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('')}
`
}
})
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.
Avalie este artigo