Automaatne täiendus JavaScriptis

Nüüd rakendame automaatse täienduse. Selle mõiste all mõistetakse rippmenüü näitamist teksti sisestamisel sisendväljale. Vaatame seda näite varal. All olen teinud sisendvälja, kuhu saab sisestada riigi nime. Samas, kui sisestada mõned tähed, kuvatakse sisendvälja all riikide loend, mis algavad sisestatud sõnega.

Soovi korral on võimalik, et mitte sisestada täielikult riigi nime, klõpsata hiirega mis tahes riigi peal ja see ilmub sisendväljale. Selleks üldjoontes automaatne täiendus ongi vajalik. Näites lihtsuse huvides tegin ainult kolm riiki: Belarus, Belgium ja Bulgaria. Sisestage allolevasse sisendvälja kõigepealt sümbol 'B' (inglise keeles) ja seejärel 'e' ning vaadake, mis juhtub:

Arutelu

Arutleme, kuidas ülesannet lahendada. On vaja teha massiiv riikide nimedega. Minul see on selline:

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

Teksti sisestamisel sisendväljale tuleb iga sümboli sisestamisel massiiv läbi vaadata ja saada riigid, mis algavad sisestatud sõnega. Seda on mugav teha meetoditega filter ja startsWith.

Abiga filter saab massiivi riike, mis algavad sisestatud sõnega. Seejärel tuleb see massiiv tsükliga läbi vaadata ja täita loend ul riikidega elementidega. Ja nii tuleb teha iga sümboli sisestamisel, eelnevalt eemaldades loendist varem loodud elemendid.

Teie mugavuseks esitan valmis vorminduse:

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

Kopeerige endale toodud HTML ja CSS koodid. Rakendage automaatne täiendus vastavalt kirjeldatud algoritmile.