Automatické dopĺňanie v JavaScripte

Teraz implementujeme automatické dopĺňanie. Pod týmto pojmom sa rozumie rozbaľujúca sa nápoveda pri zadávaní textu do vstupného poľa. Pozrime sa na príklad. Nižšie som vytvoril vstupné pole, do ktorého je možné zadať názov krajiny. Pritom, ak zadáte nejaké písmená, pod vstupným poľom sa objaví zoznam krajín, ktoré začínajú na zadaný reťazec.

V prípade potreby je možné, aby ste nemuseli zadávať celý názov krajiny, kliknúť myšou na ľubovoľnú krajinu a ona sa objaví vo vstupnom poli. Na to sa, vo všeobecnosti, automatické dopĺňanie aj používa. V príklade pre jednoduchosť som vytvoril iba tri krajiny: Belarus, Belgium a Bulgaria. Zadajte do nižšie uvedeného vstupného poľa najprv znak 'B' anglické, a potom 'e' a pozrite sa, čo sa stane:

Diskusia

Poďme diskutovať o tom, ako problém vyriešiť. Je potrebné vytvoriť pole s názvami krajín. Ja ho mám takéto:

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

Pri zadávaní textu do vstupného poľa je potrebné pri každom zadaní znaku prechádzať pole s krajinami a získať krajiny, ktoré začínajú na zadaný reťazec. Je vhodné to robiť pomocou metód filter a startsWith.

Pomocou filter je možné získať pole krajín začínajúcich sa na zadaný reťazec. Potom je potrebné prechádzať toto pole cyklom a naplniť zoznam ul položkami li s krajinami. A tak je potrebné robiť pri každom zadaní znaku, predtým odstrániť z ul predtým vytvorené položky li.

Pre vaše pohodlie uvádzam hotové HTML a 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;
}

Skopírujte si uvedené HTML a CSS kódy. Realizujte automatické dopĺňanie podľa opísaného algoritmu.