Автодополнение на JavaScript

Сейчас мы реализуем автодополнение. Под этим термином понимается выпадающая подсказка при вводе текста в инпут. Давайте посмотрим на примере. Ниже я сделал инпут, в который можно ввести название страны. При этом, если ввести какие-то буквы, то под инпутом появится список стран, которые начинаются на введенную строку.

При желании можно, чтобы не вводить целиком имя страны, кликнуть мышкой на любую страну и она появится в инпуте. Для этого, в общем-то, автодополнение и нужно. В примере для простоты я сделал только три страны: Belarus, Belgium и Bulgaria. Введите в приведенный ниже инпут сначала символ 'В' английское, а потом 'e' и посмотрите, что будет:

Обсуждение

Давайте обсудим, как решать задачу. Нужно сделать массив с названиями стран. У меня он вот такой:

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

При вводе текста в инпут нужно по вводу каждого символа перебирать массив со странами и получать страны, которые начинаются на введенную строку. Это удобно делать с помощью методов filter и startsWith.

С помощью filter можно получить массив стран, начинающихся с введенной строки. Затем нужно перебрать этот массив циклом и заполнить список ul лишками со странами. И так нужно делать на каждый ввод символа, предварительно удаляя из улки ранее созданные лишки.

Для вашего удобства привожу готовую верстку:

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

Скопируйте себе приведенный HTML и CSS коды. Реализуйте автодополнение согласно описанному алгоритму.