Autocompletar em JavaScript

Agora vamos implementar o autocompletar. Este termo se refere a uma dica suspensa ao digitar texto em um input. Vamos ver um exemplo. Abaixo, criei um input no qual você pode digitar o nome de um país. Ao mesmo tempo, se algumas letras forem digitadas, uma lista de países que começam com a string digitada aparecerá abaixo do input.

Se desejar, para não ter que digitar o nome completo do país, você pode clicar com o mouse em qualquer país e ele aparecerá no input. É para isso, basicamente, que o autocompletar serve. No exemplo, para simplificar, incluí apenas três países: Belarus, Belgium e Bulgaria. Digite no input abaixo primeiro o caractere 'B' (inglês) e depois 'e' e veja o que acontece:

Discussão

Vamos discutir como resolver a tarefa. É necessário criar um array com os nomes dos países. O meu é assim:

javascriptlet arr  = ['Belarus', 'Belgium', 'Bulgaria'];

Ao digitar texto no input, a cada caractere digitado, é necessário percorrer o array de países e obter os países que começam com a string digitada. Isso é conveniente fazer com os métodos filter e startsWith.

Com filter você pode obter um array de países que começam com a string digitada. Em seguida, é necessário percorrer este array com um loop e preencher a lista ul com os itens de lista (li) dos países. E isso deve ser feito a cada caractere digitado, previamente removendo da lista ul os itens li criados anteriormente.

Para sua conveniência, forneço o código HTML/CSS pronto:

html<div id="parent">
  <input id="elem">
  <ul id="list"></ul>
</div>
text text text text text

css#parent {
  position: relative;
}
#elem {
  padding: 5px;
  font-size: 18px;
}

#parent ul {
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background-color: white;
}
#parent li {
  border: 1px solid gray;
  font-size: 18px;
  padding: 5px;
}
#parent li:hover {
  border: 1px solid black;
  cursor: pointer;
}