Autouzupełnianie w JavaScript

Teraz zaimplementujemy autouzupełnianie. Przez ten termin rozumie się podpowiedź rozwijaną podczas wprowadzania tekstu do pola input. Spójrzmy na przykład. Poniżej umieściłem pole input, do którego można wpisać nazwę kraju. Jednocześnie, jeśli wpiszesz jakieś litery, pod polem input pojawi się lista krajów, które zaczynają się na wpisany ciąg.

W razie potrzeby można, aby nie wpisywać całej nazwy kraju, kliknąć myszką na dowolny kraj i pojawi się on w polu input. Właśnie po to, ogólnie rzecz biorąc, autouzupełnianie jest potrzebne. W przykładzie dla prostoty umieściłem tylko trzy kraje: Belarus, Belgium i Bulgaria. Wpisz w podane poniżej pole input najpierw symbol 'B' (angielskie), a potem 'e' i zobacz, co się stanie:

Dyskusja

Porozmawiajmy, jak rozwiązać zadanie. Należy utworzyć tablicę z nazwami krajów. U mnie jest ona taka:

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

Podczas wprowadzania tekstu do pola input należy przy każdym wprowadzeniu znaku przeglądać tablicę z krajami i uzyskiwać kraje, które zaczynają się na wpisany ciąg. Wygodnie jest to zrobić za pomocą metod filter i startsWith.

Za pomocą filter można uzyskać tablicę krajów zaczynających się od wpisanego ciągu. Następnie należy przejrzeć tę tablicę pętlą i wypełnić listę ul elementami li z krajami. I tak trzeba robić przy każdym wprowadzeniu znaku, uprzednio usuwając z listy ul wcześniej utworzone elementy li.

Dla Twojej wygody podaję gotowy kod HTML i 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;
}

Skopiuj do siebie podane kody HTML i CSS. Zaimplementuj autouzupełnianie zgodnie z opisanym algorytmem.