AutoComplete with JS

Using JavaScript to create a simple autocomplete

[Clique aqui para ler em português]

Let’s create an autocomplete so that clicking on an input displays a suggestion list

Code

First let’s create the interface, we’ll do something simple, using just HTML.

HTML Code

We have a div and inside we have a label, an input and a ul, this input will be where we will type the information and when the information matches the list we have it will be displayed in ul

JS Code

We have four functions:

• changeAutoComplete = In this function we will have the input values, we check if there is any text, we call the autocomplete function, with the return of the autocomplete function we do a loop and add the item using the additem() function;
• autoComplete = In this function we have a target array and with the data passed we check if the typed text exists in some value of the target array, if it exists it is returned;
• addItem = Here the received value is added directly to ul;
• selectItem = This function is activated by clicking on the item list, thus directly choosing the selected item;

ready simple like that.

Demo

See below for the complete working project.

Youtube

If you prefer to watch it, see the development on youtube.

References:

Criando um autocomplete com JavaScript | Alura Cursos Online

Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊