Automātiskā aizpildīšana JavaScript

Tagad mēs realizēsim automātisko aizpildīšanu. Ar šo terminu saprot nolaižamo padomu ievadot tekstu ievades laukā. Apskatīsim piemērā. Zemāk es izveidoju ievades lauku, kurā var ievadīt valsts nosaukumu. Tajā pašā laikā, ja ievada dažus burtus, zem ievades lauka parādīsies valstu saraksts, kuras sākas ar ievadīto virkni.

Vēlēšanās varat, lai neievadītu pilnībā valsts nosaukumu, ar peles klikšķi uz jebkuras valsts un tā parādīsies ievades laukā. Tas, kopumā, automātiskā aizpildīšana arī ir vajadzīga. Piemērā vienkāršības labad es izveidoju tikai trīs valstis: Belarus, Belgium un Bulgaria. Ievadiet zemāk redzamajā ievades laukā vispirms simbolu 'B' angliski, un pēc tam 'e' un redzēsit, kas notiks:

Diskusija

Parliecīsimies, kā atrisināt uzdevumu. Jāizveido massīvs ar valstu nosaukumiem. Man tas ir šāds:

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

Ievadot tekstu ievades laukā, katras ievades brīdī simbols jāpārmeklē massīvs ar valstīm un jāiegūst valstis, kuras sākas ar ievadīto virkni. To ir ērti izdarīt ar metožu filter un startsWith palīdzību.

Ar filter palīdzību var iegūt massīvu valstu, kas sākas ar ievadīto virkni. Pēc tam jāizmeklē šis massīvs ciklā un jāaizpilda saraksts ul ar saraksta elementiem ar valstīm. Un tā jādara katrā simbola ievades brīdī, iepriekš izdzēšot no saraksta iepriekš izveidotos saraksta elementus.

Jūsu ērtībām piedāvāju gatavo izkārtojumu:

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

Nokopējiet sev norādītos HTML un CSS kodus. Realizējiet automātisko aizpildīšanu saskaņā ar aprakstīto algoritmu.