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:

let 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:

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

#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;
}

Copie os códigos HTML e CSS fornecidos. Implemente o autocompletar de acordo com o algoritmo descrito.