Autokiegészítés JavaScript nyelven

Most egy autokiegészítést fogunk megvalósítani. Ezen a kifejezésen egy legördülő segítség értendő szöveg beírásakor egy input mezőbe. Nézzük meg egy példán. Az alább készítettem egy input mezőt, amibe be lehet írni egy ország nevét. Eközben, ha beírsz néhány betűt, akkor az input mező alatt megjelenik egy lista azokról az országokról, amelyek a beírt sorozattal kezdődnek.

Ha szeretnéd, hogy ne kelljen teljesen beírni az ország nevét, kattints az egérrel bármely országra és az megjelenik az input mezőben. Egyébként erre való az autokiegészítés. A példában az egyszerűség kedvéért csak három országot vettem fel: Belarus, Belgium és Bulgaria. Írd be az alábbi input mezőbe először a 'B' angol betűt, majd 'e' betűt és figyeld meg, mi történik:

Megvitatás

Beszéljük meg, hogyan oldjuk meg a feladatot. Készíteni kell egy tömböt az országok neveivel. Nálam ez ilyen:

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

Szöveg beírásakor az input mezőbe minden egyes karakter beírásakor végig kell iterálni az országok tömbjén és meg kell kapni azokat az országokat, amelyek a beírt sorozattal kezdődnek. Ezt kényelmesen meg lehet tenni a filter és a startsWith metódusokkal.

A filter segítségével megkaphatjuk azon országok tömbjét, amelyek a beírt sorozattal kezdődnek. Ezután végig kell iterálni ezen a tömbön egy ciklussal és ki kell tölteni a ul listát az országokkal ellátott listaelemekkel. És ezt minden egyes beírt karakter alkalmával meg kell tenni, előzetesen eltávolítva az ul-ból a korábban létrehozott listaelemeket.

A te kényelmedért közlöm a kész HTML és CSS kódot:

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

Másold le a megadott HTML és CSS kódokat. Valósítsd meg az autokiegészítést a leírt algoritmus szerint.