Samodejno dopolnjevanje v JavaScript

Zdaj bomo implementirali samodejno dopolnjevanje. Pod tem izrazom razumemo spustni namig pri vnosu besedila v vnosno polje. Poglejmo na primeru. Spodaj sem naredil vnosno polje, v katerega je mogoče vnesti ime države. Pri tem, če vneseš nekaj črk, se pod vnosnim poljem prikaže seznam držav, ki se začnejo z vnesenim nizom.

Po želji je mogoče, da ni treba vnesti v celoti ime države, klikniti z miško na katero koli državo in ta se bo prikazala v vnosnem polju. Za to, na splošno, je samodejno dopolnjevanje potrebno. V primeru za enostavnost sem naredil samo tri države: Belarus, Belgium in Bulgaria. Vnesite v spodnje vnosno polje najprej znak 'B' angleški, nato pa 'e' in poglejte, kaj se bo zgodilo:

Razprava

Razpravljajmo, kako rešiti nalogo. Potrebno je narediti seznam z imeni držav. Pri meni je takšen:

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

Pri vnosu besedila v vnosno polje je ob vsakem vnosu znaka potrebno prebrskati seznam z državami in dobiti države, ki se začnejo z vnesenim nizom. To je priročno narediti z metodama filter in startsWith.

Z filter je mogoče dobiti seznam držav, ki se začnejo z vnesenim nizom. Nato je potrebno prebrskati ta seznam z zanko in zapolniti seznam ul z elementi li z državami. In tako je potrebno narediti ob vsakem vnosu znaka, predhodno odstranivši iz seznama ul prej ustvarjene elemente li.

Za vašo priročnost prinašam pripravljeno razporeditev:

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

Kopirajte si navedene HTML in CSS kode. Implementirajte samodejno dopolnjevanje po opisanem algoritmu.