Реализация автодополения на JavaScript

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

Исходники кода

#parent {
	position: relative;
}
#parent ul {
	position: absolute;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: white;
}

#parent li {
	border: 1px solid gray;
	padding: 3px;
}
#parent li:hover {
	border: 1px solid black;
	cursor: pointer;
}

<div id="parent">
	<input id="elem">
	<!--
	<ul>
		<li>Belarus</li>
		<li>Belgium</li>
		<li>Bulgaria</li>
	</ul>
	-->
</div>
text text text text text

let arr = ['Belarus', 'Belgium', 'Bulgaria', 'Russia'];
let elem = document.querySelector('#elem');
let parent = document.querySelector('#parent');

let ul = document.createElement('ul');
parent.appendChild(ul);

elem.addEventListener('input', function() {
	ul.innerHTML = '';
	
	if (this.value !== '') {
		let matches = arr.filter(item => item.startsWith(this.value));
		
		if (matches.length > 0) {
			for (let match of matches) {
				let li = document.createElement('li');
				li.innerHTML = match;
				ul.appendChild(li);
				
				li.addEventListener('click', function() {
					elem.value = this.innerHTML;
					ul.innerHTML = '';
				});
			}
		}
	}
});