AutoComplete with JS
Tags: javascript, tutorial, html
Published: 2021-11-19 19:39:55

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/autocomplete-com-javascript-36ca1fa93b28)

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
<div>
  <label for="input">Input</label>
  <input type="text" id="input" />
  <ul id="suggestions"></ul>
</div>
```

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

```JavaScript
(function () {
  "use strict";
  let inputField = document.getElementById('input');
  let ulField = document.getElementById('suggestions');
  inputField.addEventListener('input', changeAutoComplete);
  ulField.addEventListener('click', selectItem);

  function changeAutoComplete({ target }) {
    let data = target.value;
    ulField.innerHTML = ``;
    if (data.length) {
      let autoCompleteValues = autoComplete(data);
      autoCompleteValues.forEach(value => { addItem(value); });
    }
  }

  function autoComplete(inputValue) {
    let destination = ["Italy", "Spain", "Portugal", "Brazil"];
    return destination.filter(
      (value) => value.toLowerCase().includes(inputValue.toLowerCase())
    );
  }

  function addItem(value) {
    ulField.innerHTML = ulField.innerHTML + `<li>${value}</li>`;
  }

  function selectItem({ target }) {
    if (target.tagName === 'LI') {
      inputField.value = target.textContent;
      ulField.innerHTML = ``;
    }
  }
})();
```

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.

{% codepen https://codepen.io/WalterNascimento/pen/PobzKzq %}

## Youtube

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

{% youtube tfxAUi0lMos %}

## References:

https://www.alura.com.br/artigos/criando-um-autocomplete-com-javascript?gclid=CjwKCAiA9vOABhBfEiwATCi7GFd7L_NkceqRgAk4CYgsN1rANbWH12fb2zhYnRWEM7rmko74XgbIfBoCB1YQAvD_BwE

***

## 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! 😊😊

***

## Support Me

[Youtube - WalterNascimentoBarroso](https://www.youtube.com/channel/UCXm0xRtDRrdnvkW24WmkBqA)
[Github - WalterNascimentoBarroso](https://github.com/walternascimentobarroso)
[Codepen - WalterNascimentoBarroso](https://codepen.io/walternascimento/)
[Linkedin - WalterNascimentoBarroso](https://www.linkedin.com/in/walternascimentobarroso/)