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

Сега ще реализираме автодопълнение. Под този термин се разпада падаща подсказка при въвеждане на текст в поле за въвеждане. Нека да разгледаме на примера. По-долу съм направил поле за въвеждане, в което може да се въведе име на държава. При това, ако се въведат някакви букви, под полето ще се появи списък с държави, които започват с въведения низ.

При желание може, за да не се въвежда изцяло името на държавата, да се кликне с мишката върху която и да е държава и тя ще се появи в полето. За това, общо взето, автодопълнението и е нужно. В примера за простота са направени само три държави: Belarus, Belgium и Bulgaria. Въведете в даденото по-долу поле за въвеждане първо символа 'B' на английски, а след това 'e' и вижте какво ще се случи:

Обсъждане

Нека да обсъдим как се решава задачата. Трябва да се направи масив с имената на държавите. При мен той е такъв:

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

При въвеждане на текст в полето за въвеждане, при всяко въвеждане на символ трябва да се претърсва масива с държави и да се получават държави, които започват с въведения низ. Това удобно се прави с помощта на методите filter и startsWith.

С помощта на filter може да се получи масив от държави, започващи с въведения низ. След това трябва да се премине през този масив с цикъл и да се попълни списъка ul с елементи li със страните. И това трябва да се прави при всеки въведен символ, като предварително се премахват от списъка по-рано създадените елементи li.

За ваше удобство прилагам готовия HTML и CSS:

<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 кодове. Реализирайте автодопълнение според описания алгоритъм.