Аутокомплет на JavaScript-у

Сада ћемо имплементирати аутокомплет. Под овим термином подразумева се падајући предлог приликом уноса текста у поље за унос. Хајде да погледамо на примеру. Испод сам направио поље за унос, у које се може унети назив државе. При томе, ако се унесу нека слова, испод поља ће се појавити списак држава које почињу са унетим стрингом.

По жељи је могуће, да се не би уносило у целости име државе, кликнути мишем на било коју државу и она ће се појавити у пољу за унос. Управо за то, у ствари, и служи аутокомплет. У примеру сам због једноставности написао само три државе: Belarus, Belgium и Bulgaria. Унесите у доње поље за унос прво симбол 'B' енглески, а затим '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 кодове. Имплементирајте аутокомплет према описаном алгоритму.