AutoComplete com JavaScript

Usando Javascript para criar um simples autocomplete

[click here for English]

Vamos criar um autocomplete para que ao clicar em um input seja exibido uma lista de sugestão.

Código

Primeiro vamos criar a interface, faremos algo simples, utilizando apenas HTML.

Código em HTML

Temos uma div e dentro temos uma label, um input e um ul, neste input será onde iremos digitar as informações e quando a informação bater com a lista que temos será exibido na ul

Código JS

Temos quatro funções:

• changeAutoComplete = Nesta função teremos os valores de entrada, verificamos se existe algum texto, chamamos a função autocomplete, com o retorno da função autocomplete fazemos um loop e adicionamos o item usando a função additem();
• autoComplete = Nesta função temos um array de destino e com o dado passado verificamos se o texto digitado existe em algum valor do array de destino, caso exista ele é retornado;
• addItem = Aqui o valor recebido é adicionado diretamente na ul;
• selectItem = Está função é ativada ao clicar na lista de item, assim escolhendo diretamente o item selecionado

pronto simples assim.

Demo

Veja abaixo o projeto completo funcionando.

Código no codepen

Youtube

Se preferir assistir, veja o desenvolvimento no youtube.

Youtube Video

Referências:

Criando um autocomplete com JavaScript | Alura Cursos Online

Obrigado por ler!

Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!

😊😊 Até mais! 😊😊